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 的基本封装

相关推荐
你的人类朋友32 分钟前
🤔什么时候用BFF架构?
前端·javascript·后端
知识分享小能手1 小时前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
一只小灿灿1 小时前
前端计算机视觉:使用 OpenCV.js 在浏览器中实现图像处理
前端·opencv·计算机视觉
前端小趴菜051 小时前
react状态管理库 - zustand
前端·react.js·前端框架
Jerry Lau2 小时前
go go go 出发咯 - go web开发入门系列(二) Gin 框架实战指南
前端·golang·gin
我命由我123452 小时前
前端开发问题:SyntaxError: “undefined“ is not valid JSON
开发语言·前端·javascript·vue.js·json·ecmascript·js
0wioiw02 小时前
Flutter基础(前端教程③-跳转)
前端·flutter
Jokerator2 小时前
深入解析JavaScript获取元素宽度的多种方式
javascript·css
落笔画忧愁e2 小时前
扣子Coze纯前端部署多Agents
前端