二次封装axios,详解，附带demo

当我们对axios进行二次封装时，可以按照以下步骤进行：

1. 安装axios：首先，我们需要安装axios库。可以使用npm或者yarn命令进行安装。

npm install axios

2. 创建封装文件：接下来，在项目中创建一个封装文件，比如"api.js"。

3. 导入axios：在封装文件中，导入axios库。

import axios from 'axios';

4. 创建实例：使用axios.create()方法创建一个axios实例，并设置一些默认的配置。

const instance = axios.create({
  baseURL: 'http://api.example.com', // 设置请求的基本URL
  timeout: 5000 // 设置请求超时时间
});

5. 设置拦截器：使用instance.interceptors.request.use()方法设置请求拦截器，在请求发送前进行一些处理，比如添加公共的请求头。

instance.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token');
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

instance.interceptors.response.use(
  response => {
    // 对响应数据做些什么
    return response.data;
  },
  error => {
    // 对响应错误做些什么
    return Promise.reject(error);
  }
);

6. 封装请求方法：根据项目需要封装不同的请求方法，比如get、post等。

export const get = (url, params) => {
  return instance.get(url, { params });
};

export const post = (url, data) => {
  return instance.post(url, data);
};

7. 导出封装后的方法：在封装文件中，使用export关键字导出封装后的方法。

export default {
  get,
  post
};

这样，我们就完成了对axios的二次封装。在项目中使用时，只需导入"api.js"文件，并直接调用封装的请求方法即可。

import api from './api';

api.get('/users', { page: 1 }).then(response => {
  console.log(response);
}).catch(error => {
  console.error(error);
});

通过以上步骤，我们可以更方便地使用axios发送请求，并对请求和响应进行统一处理。这样可以提高代码的重用性和可维护性，同时也方便后续的扩展和修改。