微信小程序 ts 引入 axios-miniprogram-adapter

1. 进入 miniprogram 目录， 初始package.json

//需要进入  miniprogram 目录内 创建 package.json ...
cd miniprogram

npm init -y

2.  安装 axios 和 axios-miniprogram-adapter

npm i axios axios-miniprogram-adapter

3.工具 > 构建 npm

4.如果提示找不到相关依赖可以在 project.config.json 添加/修改.

 "packNpmManually": true,
 "packNpmRelationList": [
    {
      "packageJsonPath": "./package.json",
      "miniprogramNpmDistDir": "./miniprogram/"
    }
  ]

5.新建request.ts 使用...

import axios from 'axios'
import mpAdapter from 'axios-miniprogram-adapter'
import AxiosRequestConfig from "axios-miniprogram-adapter";

axios.defaults.adapter = mpAdapter;

// 创建 axios 实例
const request = axios.create({
  baseURL: `${xxxxx}`, // 所有的请求地址前缀部分
  timeout: 60000, // 请求超时时间毫秒
  withCredentials: true, // 异步请求携带cookie
});


// 请求拦截器
request.interceptors.request.use(
  function (config: any) {
   // 统一设置用户身份 token
   //  xxxxxxx
    return config;
  },
  function (error) {
    return Promise.reject(error);
  }
);

// 响应拦截器
request.interceptors.response.use(

  function (response) {
    // 统一处理接口响应错误，如 token 过期无效、服务端异常等
    if (response.data.status && response.data.status !== 200) {
      return Promise.reject(response.data);
    }
    return response;
  },

  function (error) {
    return Promise.reject(error);
  }
);

// 导出使用 适用于返回值统一是 {code,msg,data} 形式的 ...
export default <T = any>(config: AxiosRequestConfig): Promise<any> => {
  return request(config).then((res) => {
     return (res.data.data || res.data) as T;
  });
};

6.使用示例

import request from "../utils/request";

export interface LoginPostData {
  userName: string;
  userPwd: string;
}


const doLogin = (data: LoginPostData) => {
  return request<LoginResponse>({
    method: "POST",
    url: `/xxxx/login`,
    data,
  });
};