入门级程序员，用好axios，轻松进阶

2023-12-17 02:35:14

一、axios是什么

axios是一个基于Promise的HTTP库，可以轻松发送异步HTTP请求，只需几行代码。它在前端开发中非常流行，因为其简单易用、功能强大。

二、axios源码学习

1. 发送请求

axios发送请求的语法非常简单，只需调用 axios() 方法即可。这个方法接受一个配置对象作为参数，配置对象可以指定请求的URL、方法、数据、请求头等信息。

axios({
  url: 'https://example.com/api/v1/users',
  method: 'GET'
}).then((response) => {
  console.log(response.data);
});

2. 实现过程

axios发送请求的过程主要分为以下几个步骤：

创建一个XMLHttpRequest对象。
设置请求的URL、方法、数据、请求头等信息。
发送请求。
等待服务器响应。
解析服务器响应。
返回一个Promise对象。

3. 拦截器

axios提供了请求拦截器和响应拦截器，你可以使用它们来对请求和响应进行处理。

请求拦截器会在请求发送之前执行，你可以使用它来添加请求头、设置超时时间等。

axios.interceptors.request.use((config) => {
  config.headers.Authorization = `Bearer ${token}`;
  return config;
});

响应拦截器会在请求完成后执行，你可以使用它来处理服务器的响应数据。

axios.interceptors.response.use((response) => {
  if (response.status === 200) {
    return response.data;
  } else {
    throw new Error(response.statusText);
  }
});

4. 取消请求

axios还提供了取消请求的功能，你可以使用它来取消正在进行的请求。

const request = axios.get('https://example.com/api/v1/users');

request.cancel();

三、模拟上三条功能

你可以使用axios-mock-adapter库来模拟axios发送请求、拦截器和取消请求的功能。

const mockAdapter = new axios.create({
  baseURL: 'https://example.com/api/v1/'
});

mockAdapter.onGet('/users').reply(200, {
  users: [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe' }
  ]
});

mockAdapter.interceptors.request.use((config) => {
  config.headers.Authorization = `Bearer ${token}`;
  return config;
});

mockAdapter.interceptors.response.use((response) => {
  if (response.status === 200) {
    return response.data;
  } else {
    throw new Error(response.statusText);
  }
});

mockAdapter.onGet('/users').cancel();