JS实现网络请求的方式有哪些

魁首哥

作者

JS实现网络请求的方式有哪些

这篇文章将为大家详细讲解有关JS实现网络请求的方式有哪些，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

背景

为了应对越来越多的测试需求，减少重复性的工作，有道智能硬件测试组基于 electron 开发了一系列测试提效工具。

JS实现网络请求的方式有哪些

随着工具的快速开发迭代，代码中出现了越来越多的嵌套的回调函数，工具崩溃的几率也越来越大。为了解决这些问题，我们用 async/await 对这些回调函数进行了重构，使得代码量下降，代码的可读性和可理解性都有了大幅度提高。

本文介绍了基于 XMLHttpRequest、Promise、async/await 等三种异步网络请求的写法，其中 async/await 写法允许我们以类似于同步的方式编写异步程序，摆脱繁琐的回调函数。

前言

在 js 中如果只是发起单个网络请求还不算复杂，用fetch、axios或者直接用XMLHttpRequest就能满足要求。

但若是多个请求按顺序拉取数据那写起来就很麻烦了，因为 js 中的网络请求都是异步的，想要顺序执行，最常见写法就是在回调函数中发起下一个请求，如下面这些代码：

constrequestOptions={method:'GET',redirect:'follow'};fetch('https://xxx.yyy.com/api/zzz/',requestOptions).then(response=>response.json()).then(data=>{fetch('https://xxx.yyy.com/api/aaa/'+data.id,requestOptions).then(response=>response.json()).then(data=>{console.log(data)}).catch(error=>console.error('error',error));}).catch(error=>console.error('error',error));

假设我需要经过两步获取一个数据，如从https://xxx.yyy.com/api/zzz/获取一个数据对象data，通过 data.id 得到我要获取数据的序号，之后再发一次请求得到想要的数据。

用回调函数的方式就类似于上面这样，太繁琐了，而且容易出错，并且一旦逻辑复杂就不好改。

接下来梳理一下js的几种网络请求方式，摆脱回调地狱，希望对遇到类似问题的小伙伴有所帮助。

XMLHttpRequest

首先是 XMLHttpRequest，初学前端时大名鼎鼎的 Ajax 主要指的就是它。通过 XMLHttpRequest 对象创建网络请求的套路如下：

//假设访问http://localhost:3000/user返回json对象{"name":"YouDao"}constxhr=newXMLHttpRequest();consturl='http://localhost:3000/user'xhr.onreadystatechange=function(){if(this.readyState==4&&this.status==200){constjson=JSON.parse(xhr.responseText)constname=json.nameconsole.log(name)}}xhr.open('GET',url)xhr.send()

这段代码首先创建一个 XMLHttpRequest 对象 xhr，然后给 xhr.onreadystatechange 添加 readystatechange 事件的回调函数，之后 xhr.open('GET',url) 初始化请求，最后由xhr.send() 发送请求。

请求发送后，程序会继续执行不会阻塞，这也是异步调用的好处。当浏览器收到响应时就会进入xhr.onreadystatechange 的回调函数中去。在整个请求过程中， xhr.onreadystatechange会触发四次，每次 readyState 都会自增，从1一直到4，只有到了最后阶段也就是readyState为4时才能得到最终的响应数据。

到达第四阶段后还要根据 status 判断响应的状态码是否正常，通常响应码为200说明请求没有遇到问题。这段代码最终会在控制台上会打出 YouDao。

可以看出，通过XMLHttpRequest处理请求的话，首先要针对每个请求创建一个 XMLHttpRequest 对象，然后还要对每个对象绑定 readystatechange 事件的回调函数，若是多个请求串起来，想想就很麻烦。

Promise

Promise 是在 ECMAScript 2015 引入的，如果一个事件依赖于另一个事件返回的结果，那么使用回调会使代码变得很复杂。

Promise 对象提供了检查操作失败或成功的一种模式。如果成功，则会返回另一个Promise。这使得回调的书写更加规范。

通过 Promise 处理的套路如下：

constpromise=newPromise((resolve,reject)=>{letcondition=true;if(condition){resolve("ok")}else{reject("failed")}}).then(msg=>console.log(msg)).catch(err=>console.error(err)).finally(_=>console.log("finally"))

上面这段代码把整个处理过程串起来了，首先创建一个 Promise 对象，它的构造器接收一个函数，函数的第一个参数是没出错时要执行的函数 resolve，第二个参数是出错后要执行的函数r eject。

resolve 指执行成功后then里面的回调函数，reject 指执行失败后catch里执行的回调函数。最后的 finally 是不论成功失败都会执行的，可以用来做一些收尾清理工作。

基于 Promise 的网络请求可以用 axios 库或浏览器自带的 fetch 实现。

axios 库创建请求的套路如下：

importaxiosfrom'axios'consturl='http://xxx.yyy.com/'axios.get(url).then(data=>console.log(data)).catch(err=>console.error(err))

我比较喜欢用 fetch，fetch 是用来代替 XMLHttpRequest 的浏览器 API，它不需要导库，fetch 创建请求的方式和axios类似，在开头已经展示过了就不重复写了。

虽然 Promise 把回调函数的编写方式简化了一些，但还是没有摆脱回调地狱，多个请求串起来的话就会像我开头写的那样，在 then 里面创建新的 Promise，最终变成 Promise 地狱。

async/await

async/await 是在 ECMAScript 2017 引入的，可以简化 Promise 的写法，使得代码中的异步函数调用可以按顺序执行，易于理解。

下面就用开头的那个例子说明吧：

直接用 fetch 获取数据：

用async/await改写后：

asyncfunctiondemo(){constrequestOptions={method:'GET',redirect:'follow'};constresponse=awaitfetch('https://xxx.yyy.com/api/zzz/',requestOptions);constdata=awaitresponse.json()constresponse1=awaitfetch('https://xxx.yyy.com/api/aaa/'+data.id,requestOptions)constdata1=awaitresponse1.json()console.log(data1)}demo().catch(error=>console.error('error',error))

改写后的代码是不是就很清楚了，没有那么多的 then 跟在后面了，这样如果有一连串的网络请求也不用怕了。

当 async 放在一个函数的声明前时，这个函数就是一个异步函数，调用该函数会返回一个Promise。

await 用于等待一个 Promise 对象，它只能在异步函数中使用，await 表达式会暂停当前异步函数的执行，等待 Promise 处理完成。

这样如果想让一连串的异步函数调用顺序执行，只要把被调用的这些函数放到一个用async修饰的函数中，调用前加上 await 就能让这些函数乖乖地顺序执行了。

关于“JS实现网络请求的方式有哪些”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

阅读全文

发布于 2022-03-03 21:31:40