如何等待所有的ajax操作都执行完代码再接着执行
这个问题是osc
上的一个问题, 碰巧我也有这个需求。说一下我的实现思路
使用 Promise
Promise
是ES6的一种异步执行方案。
new Promise((resolve, reject) => {
window.setTimeout(() => {
// 通过执行 resolve 方法,触发Promise对象的then回调,表示执行成功
resolve('我执行完毕了');
},3000);
}).then((result) => {
// 3s后输出: 我执行完毕了
console.log(result);
});
新的异步通信接口,fetch() 返回的就是一个Promise对象
Promise.all
这个静态方法用于将多个 Promise 实例,包装成一个新的 Promise 实例
- 所有实例都完成,才完成,最终结果以形式传递给形参
- 任何实例异常,都会触发
Promise.all
实例的rejected
,此时第一个被reject的实例的返回值,会传递给Promise.all
的回调函数
主要就是通过这个方法,把多个异步对象,封装为一个总的异步对象。只有当所有的异步任务都完成了(resolve),那么总的异步对象,才会执行
then
。
代码实现
/**
* 构建出多个异步请求(每个异步请求都应该是一个Promise对象)
*/
const promises = ['请求1', '请求2', '请求3', '请求4'].map((name) => {
// 构建请求体
let requestBody = new URLSearchParams();
requestBody.set('name', name);
console.log(`开始异步执行 ${name} `);
// 执行异步请求,返回一个 Promise 对象
return fetch('/action', {
method: 'POST',
body: requestBody
});
});
/**
* 使用 Promise.all() 来处理所有的异步请求。当所有的请求都执行完毕后,会调用 then 方法
*/
Promise.all(promises).then((results) => {
console.log('所有请求都执行完毕了');
for (let response of results){
// 遍历所有请求的响应结果
response.json().then(message => {
console.log(message);
});
}
});
执行结果
后端代码(Python)
对于每个请求,随机线程暂停1 到 2秒
from flask import Flask, request
import json
import time
import random
app = Flask(__name__)
@app.route('/action', methods = ['POST'])
def action():
# 读取到请求参数
form = request.form
name = form.get('name')
# 随机暂停 1 - 2秒
sleep = random.randrange(1, 3)
time.sleep(sleep)
# 响应客户端
return (json.dumps({'name': name, 'sleep': sleep}), 200, {'ContentType':'application/json'})
if __name__ == '__main__':
app.run(host='0.0.0.0', port=80, debug=True)