前言：
请求拦截器可以在我们需要传递请求头的时候使用，例如：token
也会在当token发生变化的时候给予响应，所以我们做好对应的判断即可
话不多说，直接进入正题：
1.首先在根目录创建common文件夹，
在里面创建request.js文件并加入以下代码：
export default {config: {//baseURL这里可以放自己的接口域名baseURL: "",getToken() {//获取tokenlet token = uni.getStorageSync("userInfo").token;if (!token) {return uni.reLaunch({ url: "/pages/login/login" });}return token;},//获取useridgetUser() {let id = uni.getStorageSync("userInfo").id;if (!id) {return uni.reLaunch({ url: "/pages/login/login" });}return id;},// 响应拦截器beforeRequest(options = {}) {return new Promise((resolve, reject) => {//请求的地址 = 上面设置的域名加上接口封装的地址options.url = this.baseURL + options.url;options.method = options.method || "POST";//添加请求头options.header = {token: this.getToken(),id: this.getUser(),};resolve(options);});},// 请求拦截器handleResponse(data) {//自行打印data根据data里的数据进行判断token过期等等if (data.data.code == 0 && data.data.msg == "权限错误"){uni.showModal({title: '提示',content: '已掉线,是否重新登录',showCancel: true,success: ({ confirm, cancel }) => {if(confirm){uni.redirectTo({ url: '/pages/login/login' })}else{}}})}return data;},},// request 请求request(options = {}) {return this.config.beforeRequest(options).then((opt) => {return uni.request(opt);}).then((res) => this.config.handleResponse(res));},
};2，在common文件夹下接着新建一个example.js文件来当作接口封装的文件
// api/example.js
import api from "@/common/request.js";
//把我们刚才写的request.js文件引入过来
export function pubdemo(data) {console.log(data, "传递的参数");//使用引入的request发送请求return api.request({//request.js文件里面已经有前缀了所以这里直接写后面的路径即可url: "/api/web/Notice/reminder",method: "post",data: data,});
}
3，页面内使用
import { pubdemo } from "@/common/example.js";pubdemo({//这里是要传递的参数，前面参数名后面参数值id: 12,}).then((res) => {console.log(res.data,res.data);});
对于一些不用传递参数的接口直接把变量名里面的对象删除即可
pubdemo().then((res) => {console.log(res.data,res.data);});
微信小程序
微信小程序跟uniapp同理,只需要把某些东西改一下即可
创作不易，留下免费的双击关注再走吧～
