JavaScript封装axios的实现详解

Axios是基于Promise的HTTP客户端，可以在浏览器和Node.js中使用。它简单易用、功能强大，逐渐成为前端开发中最常用的HTTP请求库之一。本篇文章将详细讲解如何封装axios，并提供两个示例进行说明。

封装axios

安装axios

在开始封装axios之前，我们需要先安装它。可以使用npm来安装axios，命令如下：

npm install axios

编写封装文件

我们可以新建一个文件，命名为request.js，来封装axios。在该文件中，我们可以对axios进行相关配置，并导出一个自定义的axios实例。示例代码如下：

import axios from 'axios';

const request = axios.create({
  timeout: 5000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json'
  }
});

export default request;

以上代码中，我们使用axios.create方法创建了一个axios实例，包含了timeout和headers两个常用的配置，可以根据实际需要进行添加和修改。最后使用export default导出该axios实例，供其他模块使用。

在项目中使用封装axios

在进行了axios封装之后，我们可以在项目中使用该封装后的axios，具体使用方式参考示例代码。

import request from './request';

request.get('/api/data')
  .then(res => console.log(res.data))
  .catch(error => console.log(error));

示例说明

示例1：GET请求

以下示例展示了使用封装后的axios进行GET请求，其中包含了链式调用和catch方法捕获异常的使用方式。

import request from './request';

request.get('/api/data')
  .then(res => console.log(res.data))
  .catch(error => console.log(error));

示例2：POST请求

以下示例展示了使用封装后的axios进行POST请求，其中包含了设置请求data和请求头header的用法。

import request from './request';

request.post('/api/data', {
    data: 'some data'
  }, {
    headers: {
      'X-Requested-With': 'XMLHttpRequest',
      'Content-Type': 'application/json'
    }
  })
  .then(res => console.log(res.data))
  .catch(error => console.log(error));