深入剖析axios.request

一、axios.request是什么

axios是一个基于Promise的HTTP客户端工具，可以用于浏览器和Node.js。axios.request是axios中用来请求数据的API，可以发送异步请求并获取响应数据。在axios中，request是一个重要的请求方式，下面我们来详细介绍它的各项功能。

二、axios.request的基本使用

在使用axios.request时我们需要传入一个包含配置参数的对象，在其中指定method（请求方法）、url（请求地址）等选项。

axios.request({
  method: 'get',
  url: '/user/12345',
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

在这段代码中，我们发送了一个GET请求到/user/12345这个地址，并在.then中打印出响应的数据，如果发生错误则在.catch中进行处理。

三、配置项

除了method和url参数外，axios.request还提供了许多其他的配置项，其中比较常用的有：

1、params：请求参数

参数是通过查询字符串追加到URL中的，可以是一个对象或字符串。axios会自动将对象序列化成字符串，如：

axios.request({
  method: 'get',
  url: '/user',
  params: {
    id: '12345'
  }
})

这个请求的URL将会是 /user?id=12345。

2、timeout：超时时间

指定请求超时的毫秒数（0表示无超时时间），超时时请求将会被终止。

axios.request({
  method: 'get',
  url: '/user',
  timeout: 1000 // 超时时间1s
})

3、headers：请求头

请求头是一个对象，包含了需要发送的自定义HTTP头，如下所示：

axios.request({
  method: 'get',
  url: '/user',
  headers: {'X-Requested-With': 'XMLHttpRequest'}
})

4、baseURL：基础URL

指定URL的前缀，将会在每个请求的URL前面自动加上。如：

axios.request({
  method: 'get',
  url: '/user',
  baseURL: 'https://example.com/api/',
})

四、响应处理

axios默认会将响应数据以Promise的形式返回，可以通过.then()和.catch()方法进行处理。

axios.request({
  method: 'get',
  url: '/user',
})
.then(function (response) {
  console.log(response.data); // 响应数据
})
.catch(function (error) {
  console.log(error);
});

同时，响应数据中也会包含一些信息，如status和headers，可以通过response.status和response.headers来获取。如下所示：

axios.request({
  method: 'get',
  url: '/user',
})
.then(function (response) {
  console.log(response.status); // 响应状态码
  console.log(response.headers); // 响应头
})
.catch(function (error) {
  console.log(error);
});

五、取消请求

在某些情况下，我们需要取消正在进行的请求，比如在用户离开当前页面时取消请求以避免浪费资源。axios提供了一个取消请求的方法，如下所示：

// 创建取消请求的对象
var cancel = axios.CancelToken.source();

axios.request({
  method: 'get',
  url: '/user',
  cancelToken: cancel.token // 指定取消token
})
.then(function (response) {
  console.log(response.data); // 响应数据
})
.catch(function (error) {
  if (axios.isCancel(error)) {
    console.log('请求已经被取消');
  } else {
    console.log(error);
  }
});

// 取消请求
cancel.cancel('取消请求');

这里我们创建了一个CancelToken对象，并将其作为cancelToken的值传入request请求中。然后在需要取消请求的时候调用cancel()方法即可取消请求。在响应中，我们可以通过axios.isCancel()方法判断请求是否被取消了。

六、拦截器

拦截器是axios中常用的一个功能，可以在请求发送和响应接收的过程中进行预处理。

1、请求拦截器

在发送请求之前，拦截器可以进行一些预处理操作，比如添加请求头等。可以通过axios.interceptors.request.use()方法添加拦截器，如下所示：

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在请求发送之前进行一些处理
  config.headers.Authorization = 'Bearer ' + getToken();
  return config;
}, function (error) {
  // 如果请求出错了，也可以在这里处理
  return Promise.reject(error);
});

// 发送请求
axios.request({
  method: 'get',
  url: '/user',
})
.then(function (response) {
  console.log(response.data);
})
.catch(function (error) {
  console.log(error);
});

这里我们添加了一个请求拦截器，在请求发送之前，将Authorization头加入到请求中以验证用户身份，并在请求出错时通过Promise.reject()方法返回错误信息。

2、响应拦截器

在接收到响应之后，拦截器可以对响应进行处理，比如统一处理响应数据等。可以通过axios.interceptors.response.use()方法添加拦截器，如下所示：

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 在响应接收之后进行一些处理
  if(response.data.code === 200){
    return response.data;
  } else {
    return Promise.reject(response.data);
  }
}, function (error) {
  // 如果响应出错了，也可以在这里处理
  return Promise.reject(error);
});

// 发送请求
axios.request({
  method: 'get',
  url: '/user',
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

这里我们添加了一个响应拦截器，在响应接收之后，对响应数据进行统一处理，如果响应数据中的code字段为200，就返回响应数据，否则通过Promise.reject()方法返回响应数据中的错误信息。

七、Conclusion

以上就是对axios.request进行详细的剖析和讲解，包括基础使用、配置项、响应处理、取消请求和拦截器等方面的内容。axios.request是axios中一个非常重要的API，掌握了它，我们可以很方便地进行HTTP请求，并对请求进行预处理。