uniapp 微信小程序请求拦截器 接口封装_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);
      });

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

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

微信小程序

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

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