当前位置:   article > 正文

uniapp 微信小程序 封装公共的请求js(api版本)_uniapp设置公共请求接口

uniapp设置公共请求接口

一、新建api文件夹
在项目目录下创建api文件夹,内放files跟index.js文件夹,files文件夹内放每个页面对应的js请求接口
在这里插入图片描述
1、index.js

/**
 * api接口的统一出口
 */
const api = {};
const requireComponent = require.context('./files', false, /\.js$/)
requireComponent.keys().forEach(fileName => {
  const componentName = fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
  const componentConfig = requireComponent(fileName)
  api[componentName] = componentConfig.default
})
export default api;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

2、例如:login.js

/**
 * 登录用到的接口
 */
import http from '@/utils/http.js'
import config from '@/utils/config.js'
const login = {
	//角色001-账号登录
	transportLogin(data){
		return new Promise((resolve, reject) => {
			http.request({
				domain:config.adminDomain,//接口ip地址+端口号(第一种)
				url: "/user/login",
				method: "POST",
				data,
				callBack: res => {
					resolve(res);
				}
			})
		})
	},
	//角色002-账号登录
	regulatorLogin(data){
		return new Promise((resolve, reject) => {
			http.request({
				domain:config.domain,//接口ip地址+端口号(第二种)
				url: "/wx/login",
				method: "POST",
				data,
				callBack: res => {
					resolve(res);
				}
			})
		})
	}
}
export default login;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36

二、config.js

const domain = "http://192.888.888.6:80/my"
const adminDomain = "http://192.888.444.9:800"
const adminH5 = "http://192.888.666.7:82/#";
module.exports = {
	domain,
	adminDomain,
	adminH5
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

三、main.js
在这里插入图片描述

四、页面使用

<template>
	<view class="login-btn" @click="toLogin">登录</view>
	<view class="login-btn" @click="toLogin2">登录</view>
</template>
  • 1
  • 2
  • 3
  • 4
methods: {
	toLogin(){
		this.$api.login.transportLogin(data).then(res=>{
			uni.hideLoading()
			if (res.code === 200) {
				// 保存登陆信息
				uni.setStorageSync('loginResult', res)
				uni.setStorageSync('token', res.token);
				uni.setStorageSync('login',false);
				uni.reLaunch({
					url: "/pages/learning/learning"
				})
			}
		})
	},
	toLogin2(){
		let data = {
			account: "", //用户名
			pwd: "" //密码
		};
		this.$api.login.regulatorLogin(data).then(res=>{
			uni.hideLoading()
			if (res.code === 200) {
				// 保存登陆信息
				uni.setStorageSync('loginResult', res)
				uni.setStorageSync('token', res.token);
				uni.setStorageSync('login',false);
				uni.reLaunch({
					url: "/pages/learning/learning"
				})
			}
		})
	}
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Guff_9hys/article/detail/928215
推荐阅读
相关标签
  

闽ICP备14008679号