axios和ts的简单使用

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

1:安装

javascript 复制代码
npm install axios

2:案例

一个简单的config配置信息

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

case

javascript 复制代码
// 在 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属性限制

javascript 复制代码
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

创建实例

javascript 复制代码
import config from './config'
const axiosInstance = axios.create(config)

4:发起请求前的处理

javascript 复制代码
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:接口返回值

javascript 复制代码
// @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)
  }
)

这里的ResponseCodeBaseResponse是项目自定义的类型限制,不是axios中内置的;

6:AbortController的简单介绍

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

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

案例

javascript 复制代码
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方式发起请求

javascript 复制代码
import request from '@/request'

// 查询

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

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

}

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

javascript 复制代码
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++

javascript 复制代码
import axios, { AxiosRequestConfig, AxiosResponse, AxiosError, AxiosRequestHeaders } from 'axios'
  • AxiosResponse:接口响应值类型限制

  • AxiosError:接口响应失败情况下的类型限制处理

  • AxiosRequestHeaders 接口请求头类型限制

  • AxiosRequestConfig 接口请求的基本配置类型限制

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

相关推荐
慧一居士28 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead30 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子7 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina7 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路8 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_8 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js