前言：
请求拦截器可以在我们需要传递请求头的时候使用，例如：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同理,只需要把某些东西改一下即可文章来源：https://www.toymoban.com/news/detail-818956.html
创作不易，留下免费的双击关注再走吧～文章来源地址https://www.toymoban.com/news/detail-818956.html
到了这里，关于uniapp 微信小程序请求拦截器 接口封装的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
