首页vue3 + ts 封装axios

vue3 + ts 封装axios

时间: 2023-08-29 07:13:40 浏览: 135

首先，我们需要安装 axios 和 @types/axios 两个依赖：

npm install axios @types/axios --save

然后创建一个 http.ts 文件来封装 axios：

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';

// 创建 axios 实例
const instance: AxiosInstance = axios.create({
  baseURL: process.env.VUE_APP_BASE_URL,
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
  },
});

// 请求拦截器
instance.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    // 在发送请求之前做些什么
    return config;
  },
  (error: any) => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  (response: AxiosResponse) => {
    // 对响应数据做点什么
    return response.data;
  },
  (error: any) => {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

export default instance;

然后我们可以在需要使用 axios 的地方引入这个 http.ts 文件，并调用 axios 方法：

import http from './http';

// GET 请求
http.get('/api/users')
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log(err);
  });

// POST 请求
http.post('/api/users', { name: '张三', age: 18 })
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log(err);
  });