uniapp 微信小程序请求拦截器 接口封装

前言：
请求拦截器可以在我们需要传递请求头的时候使用，例如：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);
      });

对于一些不用传递参数的接口直接把变量名里面的对象删除即可

	  pubdemo().then((res) => {
        console.log(res.data,res.data);
      });

微信小程序

微信小程序跟uniapp同理,只需要把某些东西改一下即可

创作不易，留下免费的双击关注再走吧～

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: WPS导出的PDF比较糊，和原始的不太一样，将带有SVG的文档输出为PDF

一、在WPS的PPT中 你直接输出PDF可能会导致一些问题（比如照片比原来糊）/ 或者你复制PPT中的图片到AI中类似的操作，得到的照片比原来糊，所以应该选择打印–&g服务器托管网t;高级打印 然后再另存为PDF 最后再使用AI打开PDF文件再复制到…