如何等待所有的ajax操作都执行完代码再接着执行?

如何等待所有的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);
		});
	}
});

执行结果

image

后端代码(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)

Promise 和 fetch 参考

http://es6.ruanyifeng.com/#docs/promise