深入了解Axios使用方法与原理分析Axios 是一个基于 Promise 的 HTTP 库。我将带大家深入了解Axio

Axios 是一个基于 Promise 的 HTTP 库，可以用于浏览器和 Node.js 环境中发送 HTTP 请求。具有易用性、智能化和高效性的特点。本次我带大家深入了解 Axios 的特点、使用方法。

先给大家介绍几个HTTP库

Fetch ：支持原生API，然而其只能返回一个 promise；而 Axios 能够支持同时多个请求，并拥有请求拦截器等更多的功能。
SuperAgent：是个广泛使用的请求库，在功能、性能以及易用性方面都与 Axios 相似，但其缺乏 Axios 的promise支持。
Axios ：相对于 jQuery Ajax，Axios的优势在于其支持 Promise API、拦截器以及取消请求等功能。

以下我们将着重了解Axios。

Axios的特点

支持 Promise API，可以轻易地执行所有类似于 then() 以及 catch() 方法的异步操作；
具有可取消的请求功能；
可以拦截请求和响应；
支持浏览器和 Node.js。

支持请求和响应的转换操作，并具有自动转换JSON数据、CSRF保护等功能。这些特性使得开发人员可以通过Axios对HTTP请求进行高效的管理和操作。

原理分析

Axios的底层实现使用了XMLHttpRequest对象，它将请求数据包装在一个Promise中，并发送网络请求。Axios还提供了一个拦截器（interceptor），允许在请求或响应被处理前、或者响应被reject前截获它们。下面，我们简单介绍一下Axios原理。

Axios主要使用了以下技术来实现：

构造XMLHttpRequest对象
序列化参数
配置请求信息
监听xhr的变化，包括XHR自身状态变化，和http响应状态变化
对响应数据进行处理和解析

Axios对XHR进行了两层封装，第一层封装屏蔽了XHR对象差异，提供了统一的API；第二层封装是基于Promise对象，让HTTP请求异步执行。

Axios的核心代码主要涵盖了请求拦截、响应拦截、Promise封装和请求发送等。

Axios还提供了拦截器，在请求或响应被处理前、或者响应被reject前截获它们。Axios的interceptor非常类似于 Vue.js 的 mixin，只不过interceptor被应用在 HTTP query（请求）上。

使用

引入Axios

import axios from 'axios'

Axios 支持 Promise API，使用它发送请求非常简单。以下是一个使用 Axios 发起 HTTP GET 请求的代码示例：

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

Axios 还支持 POST、PUT、DELETE 等常见的 HTTP 请求方式，使用方法与 GET 类似。

axios.post('/user', {
  firstName: 'John',
  lastName: 'Doe'
})
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Axios 也能够设置请求的头部、查询参数等。下面是一个设置请求头部的代码示例：

axios.get('/user', {
  headers: {
    'Authorization': 'Bearer token'
  }
})

上面代码中，使用 headers 来设置请求头部。如果需要在请求中添加查询参数，可以使用 params 属性，例如：

axios.get('/user', {
  params: {
    id: 1234
  }
})

高级方法的使用

发送多个并发请求

function getUsers() {
  return axios.get('/users');
}

function getPermissions() {
  return axios.get('/permissions');
}

axios.all([getUsers(), getPermissions()])
  .then(axios.spread(function (users, permissions) {
    // 两个请求现在都执行完成
    console.log(users);
    console.log(permissions);
  }));

配置全局默认值

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

取消请求

// 创建一个取消Token对象
const source = axios.CancelToken.source();

axios.get("/api/data", {
  cancelToken: source.token
}).then(res => {
  console.log(res.data);
}).catch(thrown => {
  if (axios.isCancel(thrown)) {
    console.log("请求被取消", thrown.message);
  } else {
    // 处理错误
  }
});

// 取消请求
source.cancel("取消请求");

超时设置

axios.get("/api/data", {
  timeout: 5000 // 请求超时时间为5秒
}).then(res => {
  console.log(res.data);
}).catch(e => {
  console.log("请求超时", e);
});

配置最大重试次数

axios.get("/api/data", {
  retry: 3, // 最大重试次数为3
  retryDelay: 1000 // 每次重试间隔为1秒
}).then(res => {
  console.log(res.data)
}).catch(e => {
  console.log("请求失败", e);
});

配置代理服务器

axios.get("/api/data", {
  proxy: {
    host: "127.0.0.1",
    port: 9000
  }
}).then(res => {
  console.log(res.data);
}).catch(e => {
  console.log("请求失败", e);
});

配置全局拦截器

// 请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});

以上是我花时间给大家整理的一篇深入了解Axios使用方法与原理分析，更多的内容大家可以去官方文档查阅。