mpvue 封装axios请求方法

参考链接：https://www.jianshu.com/p/71aa01ebe09c

注释：直接使用axios报错，因为微信小程序必须走wx.request发送交易，因此需要使用adapter

一、方法一

request.ts

import axios from "axios";
import qs from "qs";
import { BaseUrl } from "@/config/index";

axios.defaults.adapter = function (config) {
  return new Promise((resolve, reject) => {
    let data =
      config.method === "get"
        ? JSON.parse(config.data)
        : qs.stringify(config.data);
    // wx小程序 发起请求相应 log 就可以看到熟悉的返回啦
    wx.request({
      url: BaseUrl + config.url,
      method: config.method as any,
      data: data,
      success: (res) => {
        return resolve(res as any);
      },
      fail: (err) => {
        return reject(err);
      },
    });
  });
};

// 请求拦截器
axios.interceptors.request.use(
  (request) => {
    console.log("请求成功");
    // request.headers.token = 'token=11124654654687';
    // console.log(request) // 请求成功
    return request;
  },
  (error) => {
    // console.log(error); // 请求失败
    return Promise.reject(error);
  }
);

// 添加响应拦截器
axios.interceptors.response.use(
  (response) => {
    console.log("响应成功");
    // console.log(response.data.data); // 响应成功
    return response;
  },
  (error) => {
    // console.log(error); // 响应失败
    return Promise.reject(error);
  }
);

export default axios;

页面中调用：

import axios from "@/utils/request";

axios({
    url: "getOpenidSessionKey",
    data: {
        code: res.code,
    },
}).then((result: any) = > {
    console.log(result);
});

二、方法二

request.ts

import axios, { AxiosResponse, AxiosRequestConfig } from "axios";
import { BaseUrl } from "@/config/index";
import requestConfig from "@/config/requestConfig";
import { UserModule } from "@/store/module/user";
import qs from "qs";

declare type Methods =
  | "GET"
  | "OPTIONS"
  | "HEAD"
  | "POST"
  | "PUT"
  | "DELETE"
  | "TRACE"
  | "CONNECT";

class HttpRequest {
  public pending: object; // 请求的url集合
  public constructor() {
    this.pending = {};
  }
  destroy(url: string) {
    delete this.pending[url];
    // 关闭全局的loading...
    if (!Object.keys(this.pending).length) {
      // tryHideFullScreenLoading();
    }
  }

  interceptors(instance: any, url?: string) {
    // 请求拦截
    instance.interceptors.request.use(
      (config: AxiosRequestConfig) => {
        console.log("请求拦截");
        // console.log(config);
        
        // 在请求前统一添加headers信息
        if (UserModule.session) {
          config.headers = {
            Authorization: "session " + UserModule.session,
          };
        }

        // 添加全局的loading...
        if (!Object.keys(this.pending).length) {
          // showFullScreenLoading();
        }
        return Promise.resolve(config);
      },
      (error: any) => {
        return Promise.reject(error);
      }
    );
    // 响应拦截
    instance.interceptors.response.use(
      (res: AxiosResponse) => {
        console.log(res);
        if (url) {
          this.destroy(url);
        }
        const { data, status } = res;
        if (data && status === 200) {
          // 请求成功
          return data.data;
        }
        return requestFail(res); // 失败回调
      },
      (error: any) => {
        if (error.message !== "取消重复请求") {
          if (url) {
            this.destroy(url);
          }
        }
        requestFail(error.response); // 失败回调
        return Promise.reject(error);
      }
    );
  }
  async request(options: AxiosRequestConfig) {
    const instance = axios.create();
    instance.defaults.adapter = (options: AxiosRequestConfig) => {
      return new Promise((resolve, reject) => {
        let data =
          options.method === "get"
            ? JSON.parse(options.data)
            : qs.stringify(options.data);
        // wx小程序 发起请求相应 log 就可以看到熟悉的返回啦
        wx.request({
          url: BaseUrl + options.url,
          method: options.method as Methods,
          data: data,
          success: (res) => {
            return resolve(res as any);
          },
          fail: (err) => {
            return reject(err);
          },
        });
      });
    };
    await this.interceptors(instance, options.url);
    return instance(options);
  }
}

// 请求失败
const requestFail = (res: AxiosResponse) => {
  // console.log(res);
  const { data, status } = res;
  // token失效重新登录
  if (status === 401) {
    console.log(res);
    // 账户失效
    return false;
  } else {
    return Promise.reject({
      code: status,
      msg: data.msg || res.statusText,
    });
  }
};

const HTTP = new HttpRequest();

/**
 * 抛出整个项目的api方法
 */
const Api = (() => {
  const apiObj: any = {};
  const requestList: any = requestConfig;
  const fun = (opts: AxiosRequestConfig) => {
    return (params: any = {}) => {
      // 在这里把opts的url赋值给params，是为了解决opts会缓存同一个接口不同请求方式里面的opts
      params.url = params.url === undefined ? opts.url : params.url;
      const res = HTTP.request(params);
      return res;
    };
  };
  Object.keys(requestConfig).forEach((key) => {
    let opts = {
      url: requestList[key],
    };
    apiObj[key] = fun(opts);
  });
  return apiObj;
})();

export default Api as any;

api.ts

import Api from "@/utils/request1";

export const getOpenIdSessionKey = (params = {}) => {
  return Api.getOpenIdSessionKey(params);
};

页面中调用：

import { getOpenIdSessionKey } from "./api/common";

getOpenIdSessionKey({
    data: {
        code: res.code,
    },
}).then((result: any) = > {
    console.log(result);
});