Axios中间件 - JavaScript

Axios是一个基于Promise的HTTP客户端库，可以轻松处理前后端的网络请求和响应。它支持浏览器和Node.js环境，具有以下特点：

• 提供了一致的API
• 支持请求和响应的拦截器
• 自动转换JSON数据
• 支持批量请求和并发请求
• 提供了取消请求的方式

本文介绍了如何使用Axios中间件来轻松管理HTTP请求和响应。

安装Axios

在使用Axios之前，需要安装它。可以通过npm命令进行安装：

npm install axios --save

创建实例

在使用Axios之前，需要创建Axios实例。可以使用create方法创建一个全局的Axios实例，也可以使用axios方法创建一个新的实例。

// 创建全局实例
import axios from 'axios'

axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

// 创建新实例
const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  headers: {'X-Custom-Header': 'foobar'}
});

发送请求

发送一个请求最简单的方式就是使用Axios的常规方式：

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

也可以使用async/await方式：

async function fetchData () {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.log(error);
  }
}

拦截器

拦截器是Axios提供的一个重要功能。它使用户在发送请求或接收响应之前对其进行处理，例如添加公共头、转换响应数据等。

可以使用拦截器来进行错误处理、添加存储token等操作。

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    console.log('request interceptor');
    const token = localStorage.getItem('token')
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    console.log('response interceptor');
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

axios中间件

Axios中间件可以让用户在请求发送之前、响应返回之后对请求和响应进行完全控制。Axios中间件是基于拦截器实现的。

用户可以使用以下命令安装axios-middlewares：

npm install axios-middlewares --save

使用以下命令导入axios-middlewares：

import axios from 'axios';
import middlewares from 'axios-middlewares';

middlewares.init(axios);

现在就可以使用axios-middlewares提供的中间件来处理Axios请求和响应了。常见的中间件有：

• headers：发送请求之前添加请求头
• retry：自动重试请求
• loading：添加loading效果
• timeout：请求超时处理
• logger：在控制台上打印请求和响应信息

例如，使用headers中间件：

middlewares.headers.use({
  request (config) {
    //在请求发送之前
    config.headers['X-Custom-Header'] = 'foobar';
    return config;
  },
  response (response) {
    //对响应进行处理
    return response;
  },
  error (error) {
    //请求发生错误
    return Promise.reject(error);
  }
});

总结

Axios是一个非常实用的网络请求库，它提供了许多方便的功能和底层HTML，使得开发人员可以轻松处理前后端的数据传输和请求。 Axios中间件是基于Axios拦截器实现的，可以完全控制请求和响应。Axios中间件使我们更加容易处理常见的请求和响应问题，提高了代码的可维护性。