axios和ts的简单使用

按照官网的使用案例简单记下笔记

1：安装

npm install axios

2：案例

一个简单的config配置信息

// 发起一个post请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

case

// 在 node.js 用GET请求获取远程图片
axios({
  method: 'get',
  url: 'http://bit.ly/2mTM3nY',
  responseType: 'stream'
})
  .then(function (response) {
    response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
  });

上面都是官网的案例

在实际的项目中，在使用axios请求时，都会进行数据封装。

3：创建实例

封装一些耦合度高的请求配置

config.ts文件

封装一个基础的请求头配置，使用axios中内置的ts类型 AxiosRequestConfig属性限制

import { API_BASE_URL } from '@/utils/env'
import { AxiosRequestConfig } from 'axios'

const baseURL = API_BASE_URL

const axiosConfig: AxiosRequestConfig = {
  baseURL,
  // 请求超时时间
  timeout: 30 * 1000,
  // 跨域是否带token
  withCredentials: true,
  showMessageOnReject: true,
}
export default axiosConfig

创建实例

import config from './config'
const axiosInstance = axios.create(config)

4：发起请求前的处理

axiosInstance.interceptors.request.use(
  (config) => {
    const token = getToken()
    if (token) {
      ;(config.headers as AxiosRequestHeaders).Authorization = `Bearer ${token}`
      ;(config.headers as AxiosRequestHeaders)['X-ECAPI-UserAgent'] = getUserAgent()
    }
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)

在发起请求前，添加headers,配置身份信息

在请求头部添加UserAgent：X-ECAPI-UserAgent

在使用Akamai的API时，通常需要设置X-ECAPI-UserAgent头部来标识API的调用者。这样做可以帮助Akamai识别是谁在调用API，并可能用于日志记录或者访问控制。

5：接口返回值

// @TODO: 两处reject的reason做个包装，通过一个标识符，使得业务代码可以区分走的是哪个reject
axiosInstance.interceptors.response.use(
  (res: AxiosResponse<BaseResponse>) => {
    console.log('router', router)
    console.log('location.href', location.href)
    if (res.data.code !== ResponseCode.Success) {
      // 2. HTTP状态码200,但业务code !== ResponseCode.Success, promise 会被 reject
      if (res.data.code === ResponseCode.InvalidToken) {
        // 业务代码
      } else if (res.data.code === ResponseCode.appDisabled) {
        // 业务代码
        router.push('/404')
      } else {
       // 业务代码
      }
      return Promise.reject(res)
    }
    // 1. 当且仅当业务code === ResponseCode.Success的情况下, promise 才会被 resolve
    return res
  },
  (error: AxiosError) => {
    // 3. HTTP状态码非200 || 网络异常 || 其它未被捕获的错误, promise会被 reject
    if (error.config && error.config.showMessageOnReject) {
      if (error.response?.status === 500) {
        Toast('服务异常，请稍后重试')
      } else {
        Toast('网络异常，请稍后重试')
      }
    }
    return Promise.reject(error)
  }
)

这里的ResponseCode和BaseResponse是项目自定义的类型限制，不是axios中内置的；

6：AbortController的简单介绍

这里有一个中止请求的方法，使用AbortController，在网上看到别人说的使用方法：

认识 AbortController控制器对象及其应用-****博客

案例

type EnhancedPromise<T> = Promise<T> & {
  abortController: AbortController
}

export const get = (url: string, params: Recordable = {}, config?: AxiosRequestConfig) => {
  const controller = new AbortController()
  const promise = new Promise((resolve, reject) => {
    axiosInstance
      .get<BaseResponse, AxiosResponse<BaseResponse, Recordable>, Recordable>(url, {
        params,
        signal: controller.signal,
        ...config,
      })
      .then((res) => {
        resolve(res)
      })
      .catch((err: AxiosError) => {
        reject(err)
      })
  }) as EnhancedPromise<AxiosResponse<BaseResponse, Recordable>>
  promise.abortController = controller
  return promise
}

export const post = (url: string, data: Recordable = {}, config?: AxiosRequestConfig) => {
  const controller = new AbortController()
  const promise = new Promise((resolve, reject) => {
    axiosInstance
      .post<BaseResponse, AxiosResponse<BaseResponse, Recordable>, Recordable>(url, data, {
        signal: controller.signal,
        ...config,
      })
      .then((res) => {
        resolve(res)
      })
      .catch((err: AxiosError) => {
        reject(err)
      })
  }) as EnhancedPromise<AxiosResponse<BaseResponse, Recordable>>
  promise.abortController = controller
  return promise
}

覆盖axios原有的post和get方法

7：使用

7.1 没有覆盖post和get方法的使用方式

使用axios原有的post和get方式发起请求

import request from '@/request'

// 查询

export const findCategoryTree = ({ categoryId = 0 }: Recordable) => {

  return request.post(`/manager`, { categoryId })

}

7.2覆盖了post和get方法的使用方式

import { get, post } from '@/http'
import { AxiosRequestConfig } from 'axios'

// 短信验证码登录
export const signin = (data: Recordable, config?: AxiosRequestConfig) => {
  return post(`/member/login`, data, config)
}

8：typescript的介绍

axios提供的内置类型声明，查看路径node_modules/axios/index.d.ts

import axios, { AxiosRequestConfig, AxiosResponse, AxiosError, AxiosRequestHeaders } from 'axios'

AxiosResponse：接口响应值类型限制
AxiosError：接口响应失败情况下的类型限制处理
AxiosRequestHeaders 接口请求头类型限制
AxiosRequestConfig 接口请求的基本配置类型限制

简单记录下vue3 + axios + ts 的基本封装

秒客网