前言：
请求拦截器可以在我们需要传递请求头的时候使用，例如：token
也会在当token发生变化的时候给予响应，所以我们做好对应的判断即可
1.首先在根目录创建common文件夹，
在里面创建request.js文件并加入以下代码：
export default { config: { //baseURL这里可以放自己的接口域名 baseURL: "", getToken() { //获取token let token = uni.getStorageSync("userInfo").token; if (!token) { return uni.reLaunch({ url: "/pages/login/login" }); } return token; }, //获取userid getUser() { 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); });
4，对于一些不用传递参数的接口直接把变量名里面的对象删除即可
pubdemo().then((res) => { console.log(res.data,res.data); });
微信小程序
微信小程序跟uniapp同理,只需要把某些东西改一下即可
创作不易，留下免费的双击关注再走吧～
