提要：

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)}
}