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

发表于 分类于

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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对象创建网络请求的套路如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
// 假设访问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添加readyState事件的回调函数，之后xhr.open('GET',url)初始化请求，最后由xhr.send()发送请求。

请求发送后，程序会继续执行不会阻塞，这也是异步调用的好处。当浏览器收到响应时就会进入xhr.onreadystatechange的回调函数中去。在整个请求过程中，xhr.onreadystatechange会触发四次，每次readyState都会自增，从1一直到4，只有到了最后阶段也就是readyState为4时才能得到最终的响应数据。到达第四阶段后还要根据status判断响应的状态码是否正常，通常响应码为200说明请求没有遇到问题。这段代码最终会在控制台上会打出YouDao。

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

二、Promise

Promise是在 ECMAScript 2015 引入的，如果一个事件依赖于另一个事件返回的结果，那么使用回调会使代码变得很复杂。Promise对象提供了检查操作失败或成功的一种模式。如果成功，则会返回另一个Promise。这使得回调的书写更加规范。

通过Promise处理的套路如下：

1
2
3
4
5
6
7
8
9
10
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库创建请求的套路如下：

1
2
3
4
5
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获取数据：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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改写后：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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 的结合体，特别适合用来写跨平台的工具类桌面应用程序。

江达小记