javascript - js最好怎么在两个AJax异步操作之后执行一个新的操作
本文介绍了javascript - js最好怎么在两个AJax异步操作之后执行一个新的操作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
今天碰到一个面试问题,就是如果页面中有两个异步ajax的操作,因为不确定这两个异步操作的执行顺序,怎么在这两个操作都执行完再执行一个新的操作,最好的方法是什么?
我当时回答了方法一:嵌套两个ajax,在第二个ajax的返回函数中执行新的操作。面试官回复:这种方法太矬了。
于是想了下回答方法二:通过定时器setTimeout监听局部变量,确保两个异步操作执行完了再执行新操作。 面试官回复:这种方式性能不好,能不能想到一个简单又更合理的方法。
当时思考未果
所以把这个问题放上来寻求最好的方法是什么?欢迎讨论指点
解决方案
1.Promise 包装异步ajax操作,
2.定义async 函数,
3.用await等待promise数据异步获取完成
这一种方法简洁高效,下面请看我专门给你写的示例代码
我懒得用ajax获取数据了,就用settimeout这个函数模拟获取数据吧,这个函数是异步的,原理效果一样。
//模拟ajax异步操作1
function ajax1() {
const p = new Promise((resolve, reject) => {
setTimeout(function() {
resolve('ajax 1 has be loaded!')
}, 1000)
})
return p
}
//模拟ajax异步操作2
function ajax2() {
const p = new Promise((resolve, reject) => {
setTimeout(function() {
resolve('ajax 2 has be loaded!')
}, 2000)
})
return p
}
//等待两个ajax异步操作执行完了后执行的方法
const myFunction = async function() {
const x = await ajax1()
const y = await ajax2()
//等待两个异步ajax请求同时执行完毕后打印出数据
console.log(x, y)
}
myFunction()
这篇关于javascript - js最好怎么在两个AJax异步操作之后执行一个新的操作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文