关于javascript:js-几种网络请求方式梳理摆脱回调地狱

49次阅读

共计 4213 个字符,预计需要花费 11 分钟才能阅读完成。

摘要
本文介绍了基于 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 的结合体,特地适宜用来写跨平台的工具类桌面应用程序。

正文完
 0