如何使用 Axios 执行 HTTP 请求

超、凢脫俗 2023-10-01 19:05 9阅读 0赞

开发人员做的最典型的事情之一就是对 API 进行 HTTP 调用。可以通过多种方式发送 API 请求。[我们可以使用诸如cURL][cURL]之类的命令行工具、浏览器的原生 Fetch API 或诸如 Axios 之类的包来完成此操作。

使用 Axios 向您的 API 发送 HTTP 请求是一个很棒的工具。所有主流浏览器都支持 Axios。该包可用于您的后端服务器，通过[CDN][]加载，或在您的前端应用程序中需要。

#### **在这里，我们将介绍以下内容：** ####

1.  [什么是 Axios？][Axios]
2.  [为什么选择 Axios？][Axios 1]
3.  [如何安装 Axios？][Axios 2]
4.  [使用 Axios 发送 HTTP 请求][Axios _ HTTP]
5.  [Axios 请求方法][Axios 3]
6.  [Axios 响应对象][Axios 4]
7.  [Axios 发布请求][Axios 5]
8.  [Axios 获取请求][Axios 6]
9.  [多个并发请求][Link 1]
10. [处理来自并发请求的响应][Link 2]
11. [错误处理][Link 3]
12. [使用 Axios 发布 JSON][Axios _ JSON]
13. [转换请求和响应][Link 4]
14. [请求的自定义标头][Link 5]
15. [配置默认值][Link 6]
16. [拦截请求][Link 7]
17. [取消请求][Link 8]
18. [防止 XSRF 攻击][XSRF]
19. [监控失败和缓慢的 Axios 请求][Axios 7]

#### **1、什么是Axios？** ####

Axios 是用于 Node.js 和浏览器的基于 Promise 的 HTTP 客户端。使用 Axios POST 请求和 GET 请求向 REST 端点发送异步 HTTP 查询并执行 CRUD 操作很简单。它可以直接在 JavaScript 中使用，也可以与[Vue][]或[React][]等库结合使用。

在设计动态 Web 应用程序时，几乎需要从 Javascript 端发送 HTTP 多个请求。Axios 通过在 Javascript XMLHttpRequest 接口上提供用户友好的抽象以及各种功能和配置选项，使这项工作更容易。

#### **2. 为什么选择 Axios？** ####

如果您使用 JavaScript，它会提供 XMLHttpRequest，这是一个用于处理 HTTP 请求的内置接口。另一方面，使用此接口发送多个请求有点麻烦，并且需要编写大量代码。

任何使用过 JQuery的人都应该能够识别[$.ajax函数。][.ajax]它在 XMLHttpRequest 接口上提供了更直接和用户友好的抽象，允许我们用更少的代码行发送 HTTP 请求。开发人员需要一种原生 Javascript 方式来创建 HTTP 请求，因为近年来 JQuery 等框架已经过时。

[Fetch API][]和 Axios 是目前用于发送多个请求的两种最常见的原生 Javascript 替代方案。但是，Axios GitHub 比 Fetch API 具有优势，因为它为开发人员提供了一些独特的功能。我们在下面列出了其中的一些。

*  支持多个请求和响应拦截
 *  高效的错误处理
 *  XSRF（跨站点请求伪造）保护的客户端支持
 *  响应超时
 *  能够取消请求
 *  支持旧版浏览器 (Internet Explorer 11)
 *  自动化 JSON 数据翻译
 *  支持上传进度

由于其强大的功能，开发人员越来越多地选择 Axios GitHub 而不是 Fetch API 来发送 HTTP 请求。

#### **3、如何安装axios？** ####

有几种方法可以将 Axios 合并到您的项目中。

你可以使用 npm：

$ npm install axios

或纱线：

$ yarn add axios

或浏览器：

$ bower install axios

或使用 CDN 添加到您的网页：

或者

#### **4. 使用 Axios 发送 HTTP 请求** ####

使用 Axios 发送 HTTP 请求就像给 axios() 函数提供一个包含所有配置选项和数据的对象一样简单。这个 Axios 教程对初学者非常有帮助。

axios({
    	method: "post",
    	url: "/user_login",
    	data:{
    		username: "john1904",
    		firstname: "John",
    		lastname: "Abraham"
    	}
    });

让我们更详细地看一下配置选项：

*  **method** : 发送请求的 HTTP 方法
 *  **url** : 请求必须发送到的服务器的 URL
 *  **data**：使用此选项指定的数据在 Axios POST 请求、PUT 和 PATCH 中的 HTTP 请求正文中发送。

要了解更多关于 Axios 请求函数可用的配置选项，请参阅[官方文档][Link 9]。

#### **5.axios请求方法** ####

在 Axios 中，这些是发出多个请求的基本方法。

axios.request(config)
    axios.get(url[, config])
    axios.delete(url[, config])
    axios.head(url[, config])
    axios.options(url[, config])
    axios.post(url[, data[, config]])
    axios.put(url[, data[, config]])
    axios.patch(url[, data[, config]])

#### **6.axios响应对象** ####

当我们向远程服务器发送 HTTP 请求时，我们会从该服务器 API 获得包含特定信息的响应。Axios 可用于检索此响应。

根据[Axios 文档][Axios 8]，收到的响应包含以下信息。

*  data - 从服务器返回的有效负载
 *  status -从服务器返回的[HTTP 代码][HTTP]
 *  statusText - 服务器返回的 HTTP 状态消息
 *  headers - 服务器发送的标头
 *  config - 原始请求配置
 *  request - 请求对象

#### **7. Axios 发布请求** ####

因为 Axios GitHub 是基于 Promise 的，所以响应是作为 Promise 提供的。为了获得响应并捕获任何错误，我们必须使用 then() 和 catch() 函数。

![66b4a311cfa723f157ed9f635747f193.png][]

让我们看看我们如何处理 Axios POST 请求的响应。

axios.post('/user_login', {
    	username: 'john1904',
    	password: 'spiderman'
    })
    .then(function (response) {
    	console.log(response);
    })
    .catch(function (error) {
    	console.log(error);
    });

then() 的第一个参数将在 promise 被实现时被调用；如果 promise 被拒绝，第二个参数将被调用。

#### **8.axios获取请求** ####

Axios 可以发出 GET 请求以从服务器 API 中“获取”数据。axios.get() 方法用于发出 HTTP 获取请求。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16][]

有两个参数必须传递给 Axios get() 方法。它首先需要服务端点的 URI。其次，应该提供一个包含我们希望发送到服务器 API 的属性的对象。

import axios from 'axios';
    axios.get('/user_login', {
    	params: {
    		username: 'john1904',
    	}
    })
    .then(function (response) {
    	console.log(response);
    })

**使用异步/等待**

我们可以使用 async/await 代替 Promise 来发送 HTTP 请求和管理响应。

async function getUserData() {
    	try {
    		const response = await axios.get("/user_login/john1904");
    		console.log(response);
    	}
    	catch (error) {
    		console.log(error);
    	}
    }

#### **9.多个并发请求** ####

Axios 允许我们同时发送多个请求。为此，我们将在本教程中使用 Promise.all() 函数来传递请求调用数组。

Promise.all([
        axios.get("/user_login/john1904"),
        axios.get("/user_login/john1904/comments")
    ]);

#### **10. 处理来自并发请求的响应** ####

为了发送多个并发请求，我们使用了 Promise.all() 方法。当该方法完成发送给它的所有请求时，它会交付一个包含每个请求的响应对象的承诺。传递给方法的数组中每个请求的索引可用于分隔响应。

Promise.all([
        axios.get("/user_login /john1904"),
        axios.get("/user_login/john1904/comments")
    ])
    .then(response => {
        const user = response[0].data
        const comments = response[1].data
    })
    .catch(error => {
        console.log(error);
    });

#### **11. 错误处理** ####

如果使用 Axios GitHub 提交 HTTP 请求时发生错误，返回的错误对象包含详细信息，可帮助我们确定错误的确切位置。

本教程中可能会出现三个错误，如以下示例所示。

axios.post("/user_login", {
    	username: "john1904",
    	firstname: "john",
    	lastname: "abraham"
    })
    .then(response => {
    	console.log(response);
    })
    .catch(error => {
    	if (error.response) {
    		//response status is an error code
    		console.log(error.response.status);
    	}
    	else if (error.request) {
    		//response not received though the request was sent
    		console.log(error.request);
    	}
    	else {
    		//an error occurred when setting up the request
    		console.log(error.message);
    	}
    });

您可以使用 Axios 提供的信息，根据问题发生的位置正确解决问题。

#### **12. 使用 Axios 发布 JSON** ####

请注意我们在发送 Axios POST 请求（包括 PUT 和 PATCH 请求）时如何提供标准 Javascript 对象作为数据。默认情况下，Axios 将 Javascript 数据转换为 JSON（包括 AJAX）。“content-type”标头也设置为“application/json”。

但是，如果您将序列化的 JSON 对象作为数据发送，Axios 会将其视为**“** ***application/x-www-form-urlencoded*** **”**（表单编码的请求正文）。如果预期的内容类型是 JSON，您必须使用“headers”配置选项手动设置标头。

const data = JSON.stringify({name: "John"});
    const options = {
    	headers: {"content-type": "application/json"}
    }
    axios.post("/user_login", data, options);

如果您想发送 JSON 以外的内容，则需要转换数据并正确指定内容类型标头。在提交请求或接收响应之前，Axios 提供了两个配置选项：**transformRequest**和**transformResponse**，您可以在 API 中进行此转换。

#### **13. 转换请求和响应** ####

尽管默认情况下 Axios 会自动将请求和响应转换为 JSON，但您可以覆盖此行为并指定自己的转换机制。在使用仅支持特定数据格式（如 XML 或 CSV）的 API 时，这是非常有益的。

在配置对象中设置**transformRequest**属性以在将请求数据发送到服务器 API 之前对其进行修改。此方法仅适用于 Axios POST 请求、PUT 和 PATCH 请求方法。

让我们看看在本教程中如何使用这两个配置参数来发送请求。

axios({
    	method: "post",
    	url: "user_login/john1904",
    	data: {
    		username: "john1904",
    		firstname: "John",
    		lastname: "Abraham"
    	},
        transformRequest: [(data, headers) => {
    	    //transform request data as you prefer
    	    return data;
        }],
        transformResponse: [(data) => {
    	    //transform the response data as you prefer
    	    return data;
        }]
    });

#### **14. 请求的自定义标头** ####

使用 Axios，您可以轻松地为您发出的请求指定自定义标头。要使用自定义标头，只需将对象传递给您正在使用的请求方法。

const options = {
    	headers: {"X-Custom-Header": "value"}
    }
    axios.get("user_login/john1904", options);

#### **15. 配置默认值** ####

您可以为 Axios 建立默认配置选项，这些选项将应用于您发送的每个请求。您不必以这种方式多次设置所有请求共有的选项。

*例如*，您可以轻松配置用于每个请求的基本 URL 或授权标头，如下例所示。

axios.defaults.baseURL = "https://axiosexample.com";
    axios.defaults.headers.common["Authorization"] = AUTH_TOKEN

**配置实例的默认值**

由于我们发送的请求不同，为每个 HTTP 请求指定默认配置可能是不合理的。*例如*，我们可以向两个不同的 API 发送请求，或者根据用户权限使用不同的授权令牌。

虽然在这种情况下我们可能无法找到类似于所有请求的配置选项，但我们可能能够找到各种请求组共有的选项。Axios GitHub 允许我们分别为每个组建立默认配置。

它是通过使用实例来完成的。

我们可以创建许多实例并为每个实例定义默认配置。然后，我们可以利用这个实例对象来发送请求，而不是使用 Axios 对象。

//Create new instance
    const instance = axios.create();
    //Set config defaults for the instance
    instance.defaults.baseURL = "https://axiosexample.com";
    instance.defaults.headers.common["Authorization"] = AUTH_TOKEN;
    //Send requests using the created instance
    instance.get("/user_login", {
    	params: {
    		firstname: "john"
    	}
    });

#### **16. 拦截请求** ####

Axios 最有趣的功能之一是 HTTP 请求拦截。它使您能够拦截程序发送和接收的请求，以及在任务完成之前执行一些基本活动。此功能可以更轻松地处理后台 HTTP 请求职责，包括日志记录、身份验证和授权

axios.intercept.request.use(config => {
    	//intercept the request and do something before it is sent
    	console.log("Request sent");
    	return config;
    }, error => {
    	return Promise.reject(error);
    });
    axios.get("/user_login/john1904")
    .then(response => {
    	console.log(response.data);
    });

config 对象与我们传递给 Axios 方法的对象相同，或者在这种情况下是它的别名之一。结果，拦截器可以完全访问请求的配置和数据。

一旦设置了请求拦截器，每次程序提交新请求时，都会将“请求已发送”消息记录到控制台。

在类似的方法中，我们可能会在本教程中设置一个响应拦截器。

axios.intercept.response.use(config => {
    	//intercept the response and do something when it is received
    	console.log("Response received");
    	return config;
    }, error => {
    	return Promise.reject(error);
    });
    axios.get("/user_login/john1904")
    .then(response => {
    	console.log(response.data);
    });

现在，每当收到响应时，都会将消息“收到响应”记录到控制台。

#### **17. 取消请求** ####

Axios GitHub 另一个有趣的方面是可以随时取消多个请求。

在 Web 开发中，有时远程服务器对我们请求的响应不再相关。在这种情况下，只需终止请求即可节省系统资源。Axios 为我们提供了一种方法来做到这一点。

如果要取消请求，请确保它具有在发出请求时创建的取消令牌。此令牌可用于随时取消请求。

这就是取消程序的执行方式。

值得注意的是，单个源对象可用于一次取消多个请求。当 source.cancel 被调用时，所有使用给定源产生的带有取消令牌的请求都被取消。

#### **18. 防止 XSRF 攻击** ####

攻击者使用跨站点请求伪造 (XSRF) 来破坏 Web 应用程序并执行恶意任务。在这些类型的攻击中，攻击者伪装成受信任的用户并操纵应用程序执行有利于他们的活动。

如果用户拥有高级权限，这可能会危及用户的隐私和安全，并可能导致攻击者获得对整个系统的访问权限。通过在构造请求时加入额外的身份验证信息，Axios GitHub 提供了一种机制来防止此类攻击。

这就是它的执行方式。

const options = {
    	xsrfCookieName: 'XSRF-TOKEN',
    	xsrfHeaderName: 'X-XSRF-TOKEN',
    };
    axios.post("/user_login", options);

####  ####

### **最后！！！** ###

我们涵盖了使用 Axios GitHub 发出 HTTP 请求所需了解的所有内容。如您所见，Axios 使处理 HTTP 请求和响应变得轻而易举。

它有许多配置选项，允许我们更改默认行为以满足您的需求。它包括许多使发送 HTTP 请求更容易的方法。使用 Axios GitHub，您可以在应用程序的后端和前端以比您想象的更快的速度实现 HTTP 请求发送功能。

[cURL]: https://www.atatus.com/blog/19-useful-curl-commands-that-you-should-know/
[CDN]: https://www.atatus.com/glossary/content-delivery-network/
[Axios]: https://www.atatus.com/blog/how-to-perform-http-requests-with-axios-a-complete-guide/#what-is-axios
[Axios 1]: https://www.atatus.com/blog/how-to-perform-http-requests-with-axios-a-complete-guide/#why-axios
[Axios 2]: https://www.atatus.com/blog/how-to-perform-http-requests-with-axios-a-complete-guide/#how-to-install-axios
[Axios _ HTTP]: https://www.atatus.com/blog/how-to-perform-http-requests-with-axios-a-complete-guide/#sending-http-request-with-axios
[Axios 3]: https://www.atatus.com/blog/how-to-perform-http-requests-with-axios-a-complete-guide/#axios-request-methods
[Axios 4]: https://www.atatus.com/blog/how-to-perform-http-requests-with-axios-a-complete-guide/#axios-response-objects
[Axios 5]: https://www.atatus.com/blog/how-to-perform-http-requests-with-axios-a-complete-guide/#post-request
[Axios 6]: https://www.atatus.com/blog/how-to-perform-http-requests-with-axios-a-complete-guide/#get-request
[Link 1]: https://www.atatus.com/blog/how-to-perform-http-requests-with-axios-a-complete-guide/#multiple-concurrent-request
[Link 2]: https://www.atatus.com/blog/how-to-perform-http-requests-with-axios-a-complete-guide/#handle-responses-from-concurrent-requests
[Link 3]: https://www.atatus.com/blog/how-to-perform-http-requests-with-axios-a-complete-guide/#error-handling
[Axios _ JSON]: https://www.atatus.com/blog/how-to-perform-http-requests-with-axios-a-complete-guide/#post-json-with-axios
[Link 4]: https://www.atatus.com/blog/how-to-perform-http-requests-with-axios-a-complete-guide/#transforming-requests-and-responses
[Link 5]: https://www.atatus.com/blog/how-to-perform-http-requests-with-axios-a-complete-guide/#custom-headers-for-request
[Link 6]: https://www.atatus.com/blog/how-to-perform-http-requests-with-axios-a-complete-guide/#config-defaults
[Link 7]: https://www.atatus.com/blog/how-to-perform-http-requests-with-axios-a-complete-guide/#intercept-requests
[Link 8]: https://www.atatus.com/blog/how-to-perform-http-requests-with-axios-a-complete-guide/#cancel-requests
[XSRF]: https://www.atatus.com/blog/how-to-perform-http-requests-with-axios-a-complete-guide/#protection-from-xsrf-attack
[Axios 7]: https://www.atatus.com/blog/how-to-perform-http-requests-with-axios-a-complete-guide/#monitor-failed-and-slow-axios-requests
[Vue]: https://vuejs.org/
[React]: https://reactjs.org/
[.ajax]: https://api.jquery.com/jquery.ajax/
[Fetch API]: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
[Link 9]: https://axios-http.com/docs/intro
[Axios 8]: https://www.npmjs.com/package/axios
[HTTP]: https://www.atatus.com/blog/a-complete-guide-to-understand-http-status-codes/
[66b4a311cfa723f157ed9f635747f193.png]: https://img-blog.csdnimg.cn/img_convert/66b4a311cfa723f157ed9f635747f193.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/7f8aef3711fe457c9d7cbd5fa7150733.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAYWxsd2F5Mg==,size_20,color_FFFFFF,t_70,g_se,x_16