js几种网络请求方式梳理——摆脱回调地狱

更新日期: 2022-03-03阅读: 930标签: 请求
摘要
本文介绍了基于 XMLHttpRequest、Promise、async/await 等三种异步网络请求的写法,其中async/await 写法允许我们以类似于同步的方式编写异步程序,摆脱繁琐的回调函数

一、背景

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

electron 的编程语言是js,因为大家都不是专业的前端,对js不太熟悉,在编写程序时踩了不少坑。尤其是js中的事件和网络请求,这些涉及到异步编程的地方很容易出错。

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

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

二、前言

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

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

const requestOptions = {
    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"}
const xhr = new XMLHttpRequest();
const url = 'http://localhost:3000/user'

xhr.onreadystatechange = function(){
  if (this.readyState == 4 && this.status == 200){
    const json=JSON.parse(xhr.responseText)
    const name=json.name
    console.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处理的套路如下:

const promise = new Promise((resolve,reject)=>{
  let condition = true;
  if (condition) {
    resolve("ok")
  } else {
    reject("failed")
  }
}).then( msg => console.log(msg))
  .catch( err => console.error(err))
  .finally( _ =>console.log("finally"))

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

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

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

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

import axios from 'axios'
const url = '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获取数据:

const requestOptions = {
    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));

用async/await改写后:

async function demo() {
  const requestOptions = {
    method: 'GET',
    redirect: 'follow'
  };

  const response = await fetch('https://xxx.yyy.com/api/zzz/', requestOptions);
  const data = await response.json()
  const response1 = await fetch('https://xxx.yyy.com/api/aaa/'+data.id, requestOptions)
  const data1 = await response1.json()
  console.log(data1)
}

demo().catch(error => console.error('error',error))

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

当async放在一个函数的声明前时,这个函数就是一个异步函数,调用该函数会返回一个Promise。
await用于等待一个Promise对象,它只能在异步函数中使用,await表达式会暂停当前异步函数的执行,等待 Promise 处理完成。

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

结语
通过本文的梳理,相信你已经知道怎样避免回调地狱了。不过需要注意的是 Promise 是2015年加入语言规范的,而 async/await 是2017年才加入到语言规范的,如果你的项目比较老或者是必须要兼容老版本的浏览器(如IE6 ),那就需要用别的方式来解决回调地狱了。
对于 electron 只要你用的是近几年的版本都是支持的,electron 可以当成是 chromium 和 node.js 的结合体,特别适合用来写跨平台的工具类桌面应用程序。

作者:  有道技术团队,来源:https://zhuanlan.zhihu.com/p/474692323

链接: https://www.fly63.com/article/detial/11240

nginx 301跳转https后post请求失效问题解决

强制把http请求跳转到https,结果发现App有部分的功能不能使用,因为App一共设置了4种请求方式,分别是GET,POST,DELETE和OPTIONS方式,设置301跳转后所有的请求方法都变成了GET方式,导致一些功能无法正常使用.

HTTP请求的11个处理阶段

几乎所以有关Nginx书只要是讲深入点的就会讲到Nginx请求的11个处理阶段,要记住这些真是不易,人脑特别不擅长记住各种东西,只能做些索引罢了,能做到知道这个知识点在哪儿能找到不就行了,可是你去面试还是问这些理论,所以这里汇总下记录如下

http请求过程的7个步骤

HTTP通信机制是在一次完整的HTTP通信过程中,Web浏览器与Web服务器之间将完成下列7个步骤:建立TCP连接、Web浏览器向Web服务器发送请求命令、Web浏览器发送请求头信息、 Web服务器应答

http请求的几种类型

http请求中的8种请求方法:opions 返回服务器针对特定资源所支持的HTML请求方法 ,Get 向特定资源发出请求,Post 向指定资源提交数据进行处理请求

nodejs http请求相关总结

通过node提供的http模块,可以通过其提供的get()和request()两个方法发起http请求,get()是对request()方法的封装,方便发起get请求,如果要实现post请求,那么需要对request()方法进行封装。

ajax异步请求302分析

遇到这样一种情况,打开网页两个窗口a,b(都是已经登录授权的),在a页面中退出登录,然后在b页面执行增删改查,这个时候因为授权原因,b页面后端的请求肯定出现异常(对这个异常的处理,进行内部跳转处理),b页面中的ajax请求的回调中就会出现问题

POST 请求的三种常见数据提交格式

本文所讲的 POST 请求是 HTTP/1.1 协议中规定的众多 HTTP 请求方法的其中最常用的一个。一般使用 POST 请求方法向服务器发送数据(主要是一些创建更新操作),本文讨论的是 POST 请求方法常用的四种数据提交格式。

flutter之网络请求dio封装,拦截器的封装

flutter一直很火的网络请求插件dio,直接上代码,写成一个类,可以直接使用,包含请求的封装,拦截器的封装

HTTP请求过程

当我们在web浏览器的地址栏中输入: www.baidu.com,然后回车,到底发生了什么?DNS域名解析采用的是递归查询的方式,过程是,先去找DNS缓存->缓存找不到就去找根域名服务器->根域名又会去找下一级

nginx是怎么处理http请求的?

nginx首先决定要用配置文件里的哪个server{}块来处理,假设有下面的server{}配置;nginx会根据过来的http请求头里的Host字段里的值,来判断使用哪个server{}。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!