记录一次Typescript+Axios的使用

在使用typescript中使用axios时，很多资料都是用any来处理返回值得类型

于是，记录一次Typescript+Axios的使用

axios封装

import { notification } from 'antd';
import axios from 'axios';

const codeMessage: Record<number, string> = {
  200: '服务器成功返回请求的数据。',
  201: '新建或修改数据成功。',
  202: '一个请求已经进入后台排队（异步任务）。',
  204: '删除数据成功。',
  400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
  401: '用户没有权限（令牌、用户名、密码错误）。',
  403: '用户得到授权，但是访问是被禁止的。',
  404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
  406: '请求的格式不可得。',
  410: '请求的资源被永久删除，且不会再得到的。',
  422: '当创建一个对象时，发生一个验证错误。',
  500: '服务器发生错误，请检查服务器。',
  502: '网关错误。',
  503: '服务不可用，服务器暂时过载或维护。',
  504: '网关超时。',
};

// /**
//  * @zh-CN 异常处理程序
//  * @en-US Exception handler
//  */
const errorHandler = (error: { response: Response }) => {
  const { response } = error;
  if (response && response.status) {
    const errorText = codeMessage[response.status] || response.statusText;
    const { status, url } = response;

    notification.error({
      message: `Request error ${status}: ${url}`,
      description: errorText,
    });
  } else if (!response) {
    notification.error({
      description: 'Your network is abnormal and cannot connect to the server',
      message: 'Network anomaly',
    });
  }
  // return response;
  return Promise.reject(error);
};

var Request = axios.create({
  headers: { 'Content-Type': 'application/json' },
 
});

// 添加请求拦截器
Request.interceptors.request.use(
  function (config) {
    const token = localStorage.getItem('rpa-token');
    if (token) {
      // @ts-ignore
      config.headers.common['token'] = token;
    }
    return config;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  },
);

// 添加响应拦截器
Request.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  /**
    1、集中处理响应数据（如错误码处理）
  */
  // console.log('Request.interceptors.response', response.data);

  return response;
}, errorHandler);

export default Request;

使用

import { AxiosResponse } from 'axios';
import { LoginParams } from './index';
import request from './request';
type AxiosResponseType<T> = Promise<AxiosResponse<Body<T>> >
type Body<T> = {
  code:number;
  data:T;
  message:string
}
// 实际内容
type User = {
  name:string;
  token:string;
  avtor:string;
  
}
export const login = (params: LoginParams):AxiosResponseType<User> => {
  return request('/api/login', {
    method: 'POST',
    data: params,
  });
};

赏

谢谢你请我吃糖果

微信

• 本文作者： Tsailor
• 本文链接： http://tsailor.github.io/2021/10/26/记录一次Typescript+Axios的使用/
• 版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！