目录
Promise 链式调用
实际开发中,我们经常需要同时请求多个接口。比如说:在请求完接口1
的数据data1
之后,需要根据data1
的数据,继续请求接口2
,获取data2
;然后根据data2
的数据,继续请求接口3
。
这种场景其实就是接口的多层嵌套调用。有了 promise 之后,我们可以把多层嵌套调用按照线性的方式进行书写,非常优雅。
也就是说,Promise 可以把原本的多层嵌套调用改进为链式调用。
代码举例:(多次 Ajax请求,链式调用)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/*
基于Promise发送Ajax请求
*/
const queryData = url => {
let promise = new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest()
xhr.onreadystatechange = () => {
if (xhr.readyState != 4) return;
if (xhr.readyState == 4 && xhr.status == 200) {
// 处理正常情况
resolve(xhr.responseText); // xhr.responseText 是从接口拿到的数据
} else {
// 处理异常情况
reject('接口请求失败')
}
};
xhr.responseType = 'json' // 设置返回的数据类型
xhr.open('get', url);
xhr.send(null); // 请求接口
})
return promise;
}
// 发送多个ajax请求并且保证顺序
queryData('http://localhost:8000/api1')
.then(
data1 => {
console.log(JSON.stringify(data1))
// 请求完接口1后,继续请求接口2
return queryData('http://localhost:8000/api2')
},
error1 => {
console.log(error1)
}
)
.then(
data2 => {
console.log(JSON.stringify(data2))
// 请求完接口2后,继续请求接口3
return queryData('http://localhost:8000/api3')
},
error2 => {
console.log(error2)
}
)
.then(
data3 => {
// 获取接口3返回的数据
console.log(JSON.stringify(data3))
},
error3 => {
console.log(error3)
}
)
</script>
</body>
</html>