如何使用 Axios 执行 HTTP 请求

最新推荐文章于 2024-04-09 15:59:41 发布

allway2

最新推荐文章于 2024-04-09 15:59:41 发布

阅读量2.5k

点赞数 4

文章标签： http javascript 前端

本文链接：https://blog.csdn.net/allway2/article/details/123000908

版权

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

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

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

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函数。它在 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 添加到您的网页：

<script src=”https://unpkg.com/axios/dist/axios.min.js”></script>

或者

<script src=”https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js”></script>

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 请求函数可用的配置选项，请参阅官方文档。

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 文档，收到的响应包含以下信息。

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

7. Axios 发布请求

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

让我们看看我们如何处理 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 获取请求。

有两个参数必须传递给 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 为我们提供了一种方法来做到这一点。

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

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

const cancelToken = axios.cancelToken;
const source = cancelToken.source();
axios.get("/user_login/john1904", {
	cancelToken: source.token  //create cancel token
})
.then(response => {
	console.log(response.data);
})
.catch(thrown => {
	if (axios.isCancel(thrown)) {
		console.log("Request cancelled", thrown.message);
	}
	else {
	//handle the error
	}
})
//Cancel the request
source.cancel("Request cancelled by the user");

值得注意的是，单个源对象可用于一次取消多个请求。当 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 请求发送功能。

allway2

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
如何使用 Axios 执行 HTTP 请求

开发人员做的最典型的事情之一就是对 API 进行 HTTP 调用。可以通过多种方式发送 API 请求。我们可以使用诸如cURL之类的命令行工具、浏览器的原生 Fetch API 或诸如 Axios 之类的包来完成此操作。使用 Axios 向您的 API 发送 HTTP 请求是一个很棒的工具。所有主流浏览器都支持 Axios。该包可用于您的后端服务器，通过CDN加载，或在您的前端应用程序中需要。在这里，我们将介绍以下内容：什么是 Axios？为什么选择 Axios？如何安装 Axios？
复制链接

扫一扫