对axios进行二次封装

154 阅读1分钟

当对axios进行二次封装时,您可以创建一个独立的模块来定义自定义的HTTP请求函数,并设置默认的请求配置、拦截器等。以下是一个简单的示例,演示如何对axios进行二次封装:

首先,您可以创建一个名为http.js的文件,用于封装axios。

import axios from 'axios';

// 创建一个axios实例

const http = axios.create({
  baseURL: 'http://api.example.com', // 设置默认的API请求地址
  timeout: 5000, // 设置请求超时时间
  // 其他axios配置...
});

// 添加请求拦截器
http.interceptors.request.use(
  (config) => {
    // 在发送请求之前做一些处理,例如添加请求头等
    return config;
  },
  (error) => {
    // 对请求错误做处理
    return Promise.reject(error);
  }
);

// 添加响应拦截器
http.interceptors.response.use(
  (response) => {
    // 对响应数据做一些处理,例如统一处理错误码等
    return response.data;
  },
  (error) => {
    // 对响应错误做处理
    return Promise.reject(error);
  }
);

export default http;

假设您的API文件为src/api/users.js

import http from '@/utils/http';

const getUsers = () => {
  return http.get('/users');
};

const createUser = (userData) => {
  return http.post('/users', userData);
};

export {
  getUsers,
  createUser,
};