axios 使用指南及源码解析

2023-11-10 19:53:12

axios 是一个基于 Promise 的 JavaScript HTTP 客户端库，可以在浏览器和 Node.js 环境中使用。它以其简单、易用和强大的功能而著称，是许多开发者的首选 HTTP 库。

axios 的使用

安装

要安装 axios，可以使用以下命令：

npm install axios

或者：

yarn add axios

使用

axios 的使用非常简单，只需以下几步：

导入 axios 库：

import axios from 'axios';

创建一个 axios 实例：

const axiosInstance = axios.create({
  baseURL: 'https://example.com/api',
  timeout: 1000,
});

使用 axios 实例发送请求：

axiosInstance.get('/users').then((response) => {
  console.log(response.data);
});

axios 提供了四种常用的请求方法：

get()：用于发送 GET 请求。
post()：用于发送 POST 请求。
put()：用于发送 PUT 请求。
delete()：用于发送 DELETE 请求。

axios 的源码解析

axios 的源码非常清晰易懂，我们一起来看看它是如何实现的。

axios.create()

export function create(config) {
  // 创建一个新的 axios 实例
  const context = new Context(config);

  // 将 axios 实例的原型方法添加到 context 对象上
  const instance = axios.extend(context);

  // 返回 axios 实例
  return instance;
}

axios.request()

export function request(config) {
  // 创建一个新的 axios 实例
  const context = new Context(config);

  // 调用 dispatch 方法发送请求
  return dispatchRequest(context);
}

dispatchRequest()

function dispatchRequest(context) {
  // 创建一个 Promise 对象
  let promise = Promise.resolve(context);

  // 循环执行每个拦截器
  while (context.interceptors.request.length) {
    // 获取第一个拦截器
    const interceptor = context.interceptors.request.shift();

    // 调用拦截器函数
    promise = promise.then(interceptor.fulfilled, interceptor.rejected);
  }

  // 发送请求
  promise = promise.then(sendAxiosRequest, Promise.reject).then((response) => {
    // 循环执行每个响应拦截器
    while (context.interceptors.response.length) {
      // 获取第一个响应拦截器
      const interceptor = context.interceptors.response.shift();

      // 调用响应拦截器函数
      response = response.then(interceptor.fulfilled, interceptor.rejected);
    }

    // 返回响应数据
    return response;
  }, (error) => {
    // 循环执行每个响应拦截器
    while (context.interceptors.response.length) {
      // 获取第一个响应拦截器
      const interceptor = context.interceptors.response.shift();

      // 调用响应拦截器函数
      error = error.then(interceptor.fulfilled, interceptor.rejected);
    }

    // 抛出错误
    return Promise.reject(error);
  });

  // 返回 Promise 对象
  return promise;
}