Axios的优点：为什么它是当前最受欢迎的HTTP请求库

从2014年Axios随着Vue.js的发布而出现以来，Axios已经成为了以 Node.js 为平台的一个广泛应用的轻量级的 HTTP 请求客户端。虽然还有其他的HTTP请求库，但是Axios由于其简单性、跨平台性以及对Promise的支持而变得特别受欢迎。

一、简单性

Axios的简单性体现在如下的几个方面。

1、简单的API

Axios提供了简单易懂的API，这使得我们可以在JavaScript代码中非常容易地发起HTTP请求。

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
})

在这个简单的例子中，Axios拦截器的全局配置可以做任何事情，如添加请求头，添加请求参数，控制错误信息等等。

2、内置CSRF保护

跨网站请求伪造防范（CSRF）攻击是指攻击者冒充用户提交 request，以达到把攻击者自己的请求提交到目标网站的目的。Axios在请求中内置了CSRF保护，这意味着我们无需手动添加CSRF tokens到所有的请求。Axios会自动识别所有的请求，并将XHR请求转换为AJAX，并自动添加CSRF tokens。

3、请求取消

当我们发出一个请求并想要取消它时，Axios使得它非常简单。我们只需要传递一个配置对象中的cancelToken，就能够取消请求操作。

// 创建一个取消的令牌。
const CancelToken = axios.CancelToken;
let cancel;

// 向服务器发送请求。
axios.get(`/user/12345`, {
  cancelToken: new CancelToken(function executor(c) {
    // 「executor」函数接收一个取消函数作为参数
    cancel = c;
  })
})
.catch(function (error) {
  if (axios.isCancel(error)) {
    console.log('Request canceled', error.message);
  } else {
    // 处理响应
  }
});

// 取消请求
cancel();

4、统一异常处理

Axios提供了一个方便的方法，在所有的请求中集中处理所有的异常。这样，当HTTP错误发生时，我们只需要在一个地方处理即可。

axios.interceptors.response.use((response) => {
    return response
}, (error) => {
    //global error handling
    console.log(error.response.data.error)
    return Promise.reject(error)
})

二、跨平台性

Axios的另一个主要优点是跨平台性。Axios在浏览器中运行良好，同时在 Node.js 服务器上也同样适用。这使得我们可以轻松地在客户端和服务器端使用同一个HTTP请求库。

三、Promise和async/await的支持

Promise和async/await是JavaScript中重要的异步编程技术，可以让代码更加清晰和易于理解，并且使用Promise可以更好的处理HTTP请求和响应。

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

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

四、性能和速度

Axios在性能和速度上都有比较好的表现。其中主要体现在以下两个方面。

1、自动json化请求数据和响应数据

Axios自动地将请求和响应的数据 JSON 化，而不是像许多其他的HTTP请求库一样需要手动序列化请求数据和解析响应数据。

2、并发处理请求

在许多情况下，我们需要同时发起多个HTTP请求。Axios的并发处理请求可以大大提高程序的性能。Axios使用的底层库(默认是XMLHttpRequest或者是fetch)在浏览器中支持并行请求，并且 Axios中的拦截器可以重新配置请求和响应。

五、扩展性

Axios的最后一个优点是其扩展性。Axios有一个模块化的设计，可以非常方便地扩展其功能，以满足我们的自定义需求。Axios还使用拦截器以及插件来实现功能扩展。

1、拦截器

拦截器使得我们可以在请求被发出之前或之后来对请求和响应进行修改。在请求过程中，我们可以通过添加请求拦截器、响应拦截器和错误拦截器来自定义拦截器处理流程，以实现统一的请求和响应处理。

// 添加请求拦截器
axios.interceptors.request.use((config) => {
  // 在发送请求之前做些什么
  return config
}, (error) => {
  // 处理请求错误
  return Promise.reject(error)
})

// 添加响应拦截器
axios.interceptors.response.use((response) => {
  // 处理响应数据
  return response
}, (error) => {
  // 处理响应错误
  return Promise.reject(error)
})

2、插件

Axios是基于JavaScript Promise完成的，这意味着我们可以很方便地为Axios添加功能。我们可以为Axios创建自己的插件，以添加新的请求方法，创建全局实例，添加请求拦截器等等。

// 创建一个插件
const axiosInstance = axios.create();
const plugin = (instance) => {
  instance.interceptors.request.use((config) => {
    //拦截请求
    return config;
  }, (error) => {
    //处理请求错误
    return Promise.reject(error);
  });
};

// 使用插件
axiosInstance.plugin(plugin);

结论

Axios是一个强大、简单、可靠并且广泛应用的 HTTP 库。它能够在浏览器和服务器环境下运行，并提供了许多强大的功能、以及扩展和配置选项，这使得它成为了当前最受欢迎的HTTP请求库。

原创文章，作者：BBRSA，如若转载，请注明出处：https://www.506064.com/n/372323.html