提要:
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则不携带token
if(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 data
switch (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)
}
}