您现在的位置是：主页 > news > 专业微信网站建设/微商营销

专业微信网站建设/微商营销

admin2025/4/22 6:39:25【news】

简介专业微信网站建设,微商营销,国外做油画的网站,成都网站平面设计Axios是一个流行的，基于承诺的HTTP客户端，具有易于使用的API，并且可以在浏览器和Node.js中使用。发出HTTP请求以获取或保存数据是客户端JavaScript应用程序需要执行的最常见任务之一。第三方库（尤其是jQuery）一直是与…

专业微信网站建设,微商营销,国外做油画的网站,成都网站平面设计Axios是一个流行的，基于承诺的HTTP客户端，具有易于使用的API，并且可以在浏览器和Node.js中使用。发出HTTP请求以获取或保存数据是客户端JavaScript应用程序需要执行的最常见任务之一。第三方库（尤其是jQuery）一直是与…

Axios是一个流行的，基于承诺的HTTP客户端，具有易于使用的API，并且可以在浏览器和Node.js中使用。

发出HTTP请求以获取或保存数据是客户端JavaScript应用程序需要执行的最常见任务之一。第三方库（尤其是jQuery）一直是与更详细的浏览器API进行交互并抽象出跨浏览器差异的一种流行方法。

随着人们不再使用jQuery来支持改进的本机DOM API或诸如React和Vue.js之类的前端UI库，仅仅因为$.ajax功能而包括它就变得毫无意义。

让我们看一下如何开始在代码中使用Axios，并了解一些有助于其在JavaScript开发人员中普及的功能。

Axios对比Fetch

您可能已经知道，现代浏览器附带了内置的更新Fetch API ，那么为什么不使用它呢？两者之间存在许多差异，许多人感到Axios具有优势。

这样的区别之一在于两个库如何处理HTTP错误代码。使用Fetch时，如果服务器返回4xx或5xx系列错误，则不会触发您的catch()回调，并且由开发人员检查响应状态代码以确定请求是否成功。另一方面，如果返回了这些状态代码之一，则Axios将拒绝请求承诺。

另一个小差异（通常会使新手接触该API的开发人员感到沮丧）是，Fetch在发出请求时不会自动将cookie发送回服务器。必须明确地传递一个选项以使其包含在内。 Axios在这里支持您。

可能最终成为某些节目的制胜法宝的一个不同之处是上载/下载的进度更新。由于Axios建立在较旧的XHR API之上，因此您可以为onUploadProgress和onDownloadProgress注册回调函数，以在应用程序的UI中显示完成百分比。目前，Fetch不支持这样做。

最后，Axios可以在浏览器和Node.js中使用。这有助于在浏览器和后端之间共享JavaScript代码，或促进前端应用程序在服务器端呈现。

注意：有一些适用于Node的Fetch API版本，但我认为Axios提供的其他功能使其具有优势。

正在安装

如您所料，安装Axios的最常见方法是通过npm软件包管理器：

npm i axios

并在需要的地方将其包含在您的代码中：

// ES2015 style import
import axios from 'axios';// Node.js style require
const axios = require('axios');

如果您不使用某种模块捆绑器（例如，webpack），则可以始终以传统方式从CDN提取库：

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

浏览器支持

Axios可在所有现代Web浏览器和Internet Explorer 8+中使用。

发出请求

与jQuery的$.ajax函数类似，您可以通过将选项对象传递给Axios来发出任何类型的HTTP请求：

axios({method: 'post',url: '/login',data: {user: 'brunos',lastName: 'ilovenodejs'}
});

在这里，我们告诉Axios我们要使用哪种HTTP方法（例如GET / POST / DELETE等）以及应将请求发送到哪个URL。

我们还以键/值对的简单JavaScript对象的形式提供了一些与请求一起发送的数据。默认情况下，Axios会将其序列化为JSON并将其作为请求正文发送。

请求选项

发出请求时，您可以传递很多其他选项，但这是最常见的选项：

baseUrl ：如果您指定了基本网址，它将被添加到您使用的任何相对网址的前面。
headers ：键/值对的对象，将作为标头发送。
params ：键/值对的对象，将被序列化并作为查询字符串附加到URL。
responseType ：如果期望使用JSON以外的格式的响应，则可以将此属性设置为arraybuffer ， blob ， document ， text或stream 。
auth ：传递带有username和password字段的对象将对请求的HTTP Basic身份验证使用这些凭据。

便利方法

与jQuery一样，也有执行不同类型请求的快捷方法。

get ， delete ， head和options方法都带有两个参数：URL和可选的config对象。

axios.get('/products/5');

post ， put和patch方法将数据对象作为第二个参数，并将可选的config对象作为第三个参数：

axios.post('/products',{ name: 'Waffle Iron', price: 21.50 },{ options }
);

收到回应

发出请求后，Axios将返回一个承诺，该承诺将解析为响应对象或错误对象。

axios.get('/product/9').then(response => console.log(response)).catch(error => console.log(error));

响应对象

请求成功后，您的then()回调将收到一个具有以下属性的响应对象：

data ：从服务器返回的有效负载。默认情况下，Axios需要JSON，并将为您解析回JavaScript对象。
status ：从服务器返回的HTTP代码。
statusText ：服务器返回的HTTP状态消息。
headers ：服务器发回的所有标头。
config ：原始请求配置。
request ：实际的XMLHttpRequest对象（在浏览器中运行时）。

错误对象

如果请求存在问题，则将使用错误对象（至少包含以下某些属性）来拒绝promise：

message ：错误消息文本。
response ：上一部分中所述的响应对象（如果已收到）。
request ：实际的XMLHttpRequest对象（在浏览器中运行时）。
config ：原始请求配置。

变换和拦截器

Axios提供了一些受Angular的$ http库启发的简洁功能。尽管它们看起来很相似，但用例却略有不同。

变身

Axios允许您以发出请求时可以设置的两个配置选项的形式提供转换输出或输入数据的功能： transformRequest和transformResponse 。这两个属性都是数组，使您可以链接将传递数据的多个函数。

传递给transformRequest任何函数都将应用于PUT，POST和PATCH请求。它们接收请求数据，并将标头对象作为参数，并且必须返回修改后的数据对象

const options = {transformRequest: [(data, headers) => {// do something with datareturn data;}]
}

可以以相同的方式transformResponse函数添加到transformResponse ，但仅在响应数据传递给任何链接的then()回调之前，才使用响应数据进行调用。

那么我们可以将转换用于什么呢？一种潜在的用例是处理期望以特定格式（例如XML甚至CSV）的数据的API。您可以设置一对转换，以将传出和传入的数据与API所需的格式进行相互转换。

值得注意的是，Axios的默认transformRequest和transformResponse函数可将数据与JSON相互转换，并且指定自己的转换将覆盖这些数据。

拦截器

变换使您可以修改传出和传入的数据，而Axios还允许您添加称为拦截器的功能。像转换一样，这些功能可以在发出请求或接收到响应时触发。

// Add a request interceptor
axios.interceptors.request.use((config) => {// Do something before request is sentreturn config;}, (error) => {// Do something with request errorreturn Promise.reject(error);});// Add a response interceptor
axios.interceptors.response.use((response) => {// Do something with response datareturn response;}, (error) => {// Do something with response errorreturn Promise.reject(error);});

从上面的示例中您可能已经注意到，拦截器与转换有一些重要的区别。拦截器不仅接收数据或标头，还接收完整的请求配置或响应对象。

创建拦截器时，您还可以选择提供一个错误处理程序功能，使您可以捕获任何错误并进行适当处理。

请求拦截器可用于执行某些操作，例如从本地存储中检索令牌并发送所有请求，而响应拦截器可用于捕获401响应并重定向到登录页面以进行授权。