了解 axios：简单、强大的 http 客户端

如果你正在寻找一种简单、易于使用、功能强大的 HTTP 客户端库，那么你不需要继续找了！Axios 是一款基于 Promise 的 HTTP 客户端，它可以在浏览器和 Node.js 中使用，而且使用它进行请求操作十分简单且易于理解。

一、为什么使用 Axios

使用 Axios 你可以很轻松地执行如下操作：

在浏览器和 Node.js 中同时使用
在请求中处理URL参数、请求体、HTTP Headers 等
模拟用户登录、自动携带Cookie 或其他凭证信息
支持请求的取消操作、设置请求超时时间、拦截请求和响应等高级功能
具有良好的文档说明，上手容易

二、如何使用 Axios

使用 Axios，只需要按如下步骤进行即可：

1. 安装 Axios:

可以使用 npm 或者 bower 进行安装：

npm install axios

2. 引入 Axios:

可以使用 ES6 module 或 CommonJS 方式引入 Axios 模块：

import axios from 'axios' // ES6 module
const axios = require('axios'); // CommonJS

3. 创建请求

使用 Axios 发送请求，首先需要创建一个 Axios 实例：

// 创建 Axios 实例
const instance = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  timeout: 5000,
  headers: {'X-Custom-Header': 'foobar'}
});

在实例中，我们定义了请求的 baseURL 和超时时间，也可以自定义请求头部信息。

4. 进行请求

发送请求只需要用实例调用不同的方法：

// GET 请求
instance.get('/posts/1')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

// POST 请求
instance.post('/posts', {
    title: 'foo',
    body: 'bar',
    userId: 1
    })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

在该方法中，我们使用 then 和 catch 方法来处理请求的返回结果和可能出现的错误，如果请求成功，响应结果会被包装到 response 对象中，如果失败，抛出错误会被包装到 error 对象中。

5. 配置拦截器

可以使用 Axios 配置请求和响应指示器，以在发起请求或响应时切入特定程序：

// 添加请求拦截器
instance.interceptors.request.use(config => {
  // 在请求发送之前对请求做些处理
  return config;
}, error => {
  // 对请求错误做些处理
  return Promise.reject(error);
});

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

在该方法中，我们使用 use 方法添加请求和响应的拦截器，可以处理请求或响应的信息，例如添加或修改响应头部。

三、Axios的具体使用场景

1. GET 请求

GET 请求是最常见的请求类型之一。以下示例表示如何使用 Axios 发送一个 GET 请求，将返回结果打印到控制台中：

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

2. POST 请求

POST 请求通常用于向服务器提交一些信息，在以下示例中，我们向服务器提交一个新的用户并将响应结果打印到控制台：

// 发送 POST 请求
axios.post('/user', {
    firstName: 'John',
    lastName: 'Doe',
    email: 'john.doe@axios.com'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

3. 并行请求

在某些情况下，我们需要同时执行多个请求。在以下示例中，我们使用 Axios.all 方法同时执行两个请求，并在两个请求都完成后，将响应结果打印到控制台中：

// 并行执行两个请求
axios.all([
  axios.get('/user?ID=12345'),
  axios.get('/user?ID=67890')
])
.then(axios.spread(function (resp1, resp2) {
  // 两个请求现在都执行完成
  console.log(resp1.data);
  console.log(resp2.data);
}));

4. 请求配置

请求配置对象是用来针对每个请求进行参数配置的。以下示例展示如何配置请求超时时间，并将结果打印到控制台中：

// 配置请求
axios.get('/user', {
  timeout: 1000
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

5. 自定义实例配置

我们可以创建自定义的 Axios 实例，以进行特定的请求操作。以下示例展示了如何使用自定义实例进行请求：

// 创建实例
const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: {'X-Custom-Flag': 'foobar'}
});

// 请求操作
instance.get('/user')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

四、总结

Axios 是一个简单、易于使用、功能强大的 HTTP 客户端库。使用 Axios，可以在浏览器和 Node.js 中进行请求操作，而不需要学习不同客户端库的特有语法和参数。Axios 提供了一些高级特性，如配置拦截器、支持请求的取消操作、设置请求超时时间和自定义请求头部等。通过本文，你应该已经掌握了使用 Axios 的基础知识，开始使用 Axios 吧！

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/198194.html