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);
});