mpvue 封装axios请求方法

注释：直接使用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);
});

标签：axios,return,log,url,res,request,mpvue,封装,data
来源： https://blog.51cto.com/u_14302606/2817970