uniapp+uview封装小程序请求

提要：

uniapp项目引入uview库 此步骤不再阐述

1.创建环境文件

 env.js：

let BASE_URL;if (process.env.NODE_ENV === 'development') {// 开发环境BASE_URL = '请求地址';
} else {// 生产环境BASE_URL = '请求地址';
}export default BASE_URL;

2.创建请求文件

该封装文件对后端接口返回格式有规范要求

如接口格式跟封装文件不匹配 可通过 request.js 中响应拦截进行修改 

接口返回格式示例：

{code: 200, // 根据code值判断接口状态data: {}  // 接口内容msg: "success"  // 接口备注
}

request.js：

// 接口共用地址
import BASE_URL from '@/env.js'
var request = function(app) {// 初始化请求配置uni.$u.http.setConfig((config) => {config.baseURL = BASE_URL;return config})// 请求拦截uni.$u.http.interceptors.request.use(config => {config.data = config.data || {}// 接口名为login则不携带tokenif(config.url != 'login'){config.header['Authorization'] = uni.getStorageSync('token') || ''}return config}, config => {// 返回异常承诺对象return Promise.reject(config)})// 响应拦截uni.$u.http.interceptors.response.use(response => {// uni.hideLoading();let dataswitch (response.data.code) {case 401 || 402 || 403:uni.showModal({title: '提示',content: response.data.msg,showCancel: false, // 隐藏取消按钮success: (res) => {if (res.confirm) {uni.redirectTo({url: '/pages/login'})}}})break;default:data = response.data.data;break;}return data;}, responseError => {// 返回异常承诺对象return Promise.reject(responseError)})}// 导出
module.exports = request;

3.引入请求文件

在根目录main文件内引入

// 引入请求封装
require('@/request/request.js')(app)

4.封装请求文件

 以为 login.js 为例

该POST登录请求的 login函数名  需对应第二步封装文件中的请求不携带token的判断条件

// POST
export const login = (data) => {return uni.$u.http.post("login", data);
}
// GET
export const userInfo = (data) => {return uni.$u.http.get("userInfo", {data});
}

5.请求示例

import { login, userInfo } from "@/api/login.js"data(){return{id:"",form: {username: '123456',password: '123456',},}
}methods:{// 登录 POST请求login(){const data = await login(this.form)console.log(data)if (data.token) {// 如果存在Token 则储存到本地uni.setStorageSync('token', data.token);}}// GET请求getUserInfo(){const data = await login({id: this.id})console.log(data)}
}