axios async await - Javascript

简介

axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 Node.js 中。它的特点是支持浏览器的 XMLHttpRequest 和 Node.js 的 http 请求，本篇文章主要讲解如何结合 async/await 使用 axios。

安装

可以通过 npm 安装 axios

npm install axios

使用

在进行 HTTP 请求时，我们可以使用 axios 配置 来定制请求。axios 默认使用 JSON 格式数据。

import axios from 'axios';

async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

getUser();

在上面的代码中，我们使用了 async 和 await 来处理异步请求。如果请求成功，我们将 response 输出到控制台。如果请求失败，我们将错误信息打印到控制台。

值得注意的是，我们使用了 try-catch 语法来处理错误。如果请求失败，axios 将抛出异常并返回错误信息，我们可以通过 catch 语句处理错误。

配置

在使用 axios 提交请求之前，我们可以添加一些配置来定制请求，例如请求的超时时间、请求头等。

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

async function getUser() {
  try {
    const response = await instance.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

getUser();

在上面的代码中，我们通过 axios.create 方法创建了一个 axios 实例，然后添加了一些配置项。使用这个实例发送请求时，相应的请求将会应用这些配置项。

并发请求

在实际开发中，可能需要同时发起多个请求。axios 可以使用 axios.all 方法同时发送多个请求，然后使用 axios.spread 将多个请求的响应结果合并。

async function getUsers() {
  try {
    const response = await axios.all([
      axios.get('/user/1'),
      axios.get('/user/2')
    ]);

    const [user1, user2] = response;
    console.log(user1);
    console.log(user2);
  } catch (error) {
    console.error(error);
  }
}

getUsers();

在上面的代码中，我们使用 axios.all 并发发送两个请求。在两个请求都完成后，我们使用 axios.spread 分解响应数组，并将每个请求的结果单独输出到控制台。

结论

axios 是一个简单易用的 HTTP 库，它支持浏览器和 Node.js 平台，并提供了丰富的配置和功能。结合 async/await 使用，可以让异步代码变得更加清晰简洁。