使用 axios 发送 XMLHTTPRequest

简介

XMLHTTPRequest（以下简称XHR）是JavaScript核心中的重要一环，能够使用HTTP协议进行数据传输和交互。axios是一个基于Promise的HTTP客户端，适用于浏览器和Node.js环境。在浏览器中，axios使用XHR进行数据传输，因此可以理解为axios对XHR进行了封装。本文将介绍使用axios发送XHR请求的方法。

安装

在发起请求前，需要安装axios包。可以使用npm进行安装：

npm install axios

也可以使用CDN引入，可以直接在html中引入：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

发送请求

axios支持的请求方法有get、post、put、delete等等。下面以get请求为例进行介绍。

首先，需要创建axios实例：

const axiosInstance = axios.create({
  baseURL: 'http://localhost:3000', //设置请求的基础URL
  timeout: 1000, //请求超时的时间限制
});

然后，可以直接使用该实例发起请求：

axiosInstance.get('/users')
  .then((response) => {
    console.log(response.data); //成功回调
  })
  .catch((error) => {
    console.log(error); //失败回调
  });

该代码片段使用了Promise的链式操作，代码清晰易懂。如果请求成功，则在控制台输出响应的数据；如果请求失败，则在控制台输出错误信息。

发送请求的参数

axios支持在请求中传递参数，可以使用params字段进行传参，这些参数会添加到URL的末尾。

例如：

axiosInstance.get('/users', {
  params: {
    name: '张三',
    age: 18,
  }
})

这样，发送的请求URL就成了：http://localhost:3000/users?name=张三&age=18。axios支持的参数还有headers、data、timeout、responseType等等，具体可以查看官方文档。

发送请求的取消

axios支持取消请求，可以使用CancelToken进行取消。CancelToken是一个类，用于生成取消请求所需要的token。当需要取消请求时，可以调用CancelToken的cancel方法进行取消。

例如：

const source = axios.CancelToken.source(); //创建取消请求的token

axiosInstance.get('/users', {
  cancelToken: source.token //将token传递给requestConfig
})
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    if (axios.isCancel(error)) { //判断是否是取消请求引起的错误
      console.log('请求已被取消。', error.message);
    } else {
      console.log(error);
    }
  });

source.cancel('取消请求的原因。'); //取消请求

结语

axios是一个易用且功能强大的HTTP客户端，支持的功能非常丰富，可以帮助我们更方便地发送请求和处理响应。使用axios发送XMLHTTPRequest无疑是一项程序员必须掌握的技能。

参考文献：

axios官方文档（中文版）

XHR官方文档