使用TS对axios进行简单封装

本文介绍了如何在项目中安装和使用axios库,创建axios实例,以及如何进行基本的封装和添加全局请求和响应拦截器。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.安装axios

npm i axios

2.在合适路径下新建文件(名称可随意),例如可以在项目的src下创建utils文件夹创建request.ts

3.导入axios并创建axios实例

//引入axios
import axios from 'axios'

//使用指定配置创建axios实例
const instance = axios.create({
  // 基础路径
  baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net/',
  // 请求超时时间
  timeout: 5000,
  // ....其他配置
})

基本封装

import axios from 'axios'
import type { AxiosInstance, AxiosRequestConfig } from 'axios'

class Request {
  // axios 实例
  instance: AxiosInstance

  constructor(config: AxiosRequestConfig) {
    this.instance = axios.create(config)
  }
  request(config: AxiosRequestConfig) {
    return this.instance.request(config)
  }
}

export default Request

拦截器封装

// index.ts
constructor(config: AxiosRequestConfig) {
  this.instance = axios.create(config)
  
  this.instance.interceptors.request.use(
    (res: AxiosRequestConfig) => {
      console.log('全局请求拦截器')
      return res
    },
    (err: any) => err,
  )
  this.instance.interceptors.response.use(
    // 因为我们接口的数据都在res.data下,所以我们直接返回res.data
    (res: AxiosResponse) => {
      console.log('全局响应拦截器')
      return res.data
    },
    (err: any) => err,
  )
}

### Vue 3 中 TypeScriptAxios 进行二次封装 #### 创建 Axios 实例并配置默认选项 为了实现更灵活和可维护的 HTTP 请求,在 `Vue 3` 和 `TypeScript` 的环境中,可以创建一个自定义的 Axios 实例来设置全局的基础 URL、超时时间以及其他必要的配置项。 ```typescript // src/api/index.ts import axios, { AxiosInstance, AxiosRequestConfig } from 'axios'; const service: AxiosInstance = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // 设置基础URL[^1] timeout: 5000 // 超时时长 }); ``` #### 添加请求与响应拦截器 通过添加请求和响应拦截器可以在发送请求前或接收服务器返回的数据之后执行一些逻辑操作。这有助于集中管理和处理跨域凭证、身份验证令牌以及异常情况等通用需求。 ```typescript service.interceptors.request.use( (config: AxiosRequestConfig) => { const token = localStorage.getItem('token'); if (token && config.headers) { config.headers['Authorization'] = `Bearer ${token}`; } return config; }, error => Promise.reject(error) ); service.interceptors.response.use( response => response.data, error => { console.error(`Error occurred during request:`, error); throw new Error(error.message || "Network Error"); } )[^3]; ``` #### 定义 API 接口函数 对于特定业务场景下的接口调用,建议按照模块化的方式组织代码结构,比如按功能划分成不同的文件夹如 user、article 等,并在这些目录下分别编写对应的 api 函数用于发起网络请求。 ```typescript // src/api/user.ts export function login(data: LoginFormData): Promise<any> { return service.post('/auth/login', data); } interface LoginFormData { username: string; password: string; } ``` #### 使用封装后的服务实例发起请求 当完成了上述准备工作后就可以很方便地在整个应用里使用这个经过增强过的 http client 来获取远程资源了。 ```javascript // components/Login.vue 或其他组件内 import { ref } from 'vue'; import { login as loginUser } from '@/api/user'; async function handleLogin() { try { const result = await loginUser({username:'admin',password:'123'}); console.log(result); } catch(err){ alert("登录失败!"); } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值