JavaScript axios安装与封装案例详解

简介

在 Web 开发过程中，我们经常需要进行异步网络请求。这时候，一个强大并且易于使用的工具就是 axios 库。axios 是一个基于 promise 的 HTTP 客户端，可以用于浏览器和 Node.js 中。

在本文中，我们将详细讲解如何安装 axios 库，并介绍如何封装 axios 进行网络请求。

安装 axios

我们可以使用 npm 包管理器来安装 axios。首先，我们需要在终端中进入我们的项目目录，然后运行以下命令：

npm install axios

如果你使用的是 yarn 包管理器，可以使用以下命令来安装：

yarn add axios

axios 示例

让我们来看看一些 axios 的示例代码。

GET 请求示例

axios.get('/api/user', {
  params: {
    userId: '123'
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

在这个示例中，我们向 /api/user 发送了一个 GET 请求，其中包含一个名为 userId 的查询参数。

POST 请求示例

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

在这个示例中，我们向 /api/user 发送了一个 POST 请求，其中包含一个包含 firstName、lastName 和 age 字段的 JSON 对象。

axios 封装

我们经常需要在我们的应用程序中进行大量的网络请求，为了使代码更易于维护并避免代码重复，我们可以将 axios 进行封装。

让我们来看看如何封装一个基本的 axios 实例，我们可以定义一个名为 request 的函数，它接受一个 options 对象作为参数：

import axios from 'axios';

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

const requestWithCredentials = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  withCredentials: true
});

export default function(options) {
  return request(options);
}

export function requestCredentials(options) {
  return requestWithCredentials(options);
}

在这个示例中，我们定义了两个 axios 实例，一个是基本的请求实例，另一个是附加了 withCredentials 属性的请求实例。

然后，我们定义了一个名为 request 的函数，它接受一个 options 对象作为参数，并返回基本请求实例的结果。

同时，我们还定义了一个名为 requestCredentials 的函数，它返回带有 withCredentials 属性的请求实例的结果。这可以用于在跨域请求时发送凭据信息（如 cookie）。

通过这样的封装，我们可以在应用程序中方便地进行网络请求，并根据需要对 axios 进行配置。

总结

axios 是一个强大的网络请求工具，通过封装，我们可以将其变得更加易于使用和维护。在应用程序中使用 axios 可以帮助我们快速高效地完成各种网络请求任务。