js最好怎么在两个AJax异步操作之后执行一个新的操作

Question

今天碰到一个面试问题，就是如果页面中有两个异步ajax的操作,因为不确定这两个异步操作的执行顺序，怎么在这两个操作都执行完再执行一个新的操作，最好的方法是什么？我当时回答了方法一：嵌套两个ajax，在第二个ajax的返回函数中执行新的操作。面试官回复：这种方法太矬了。于是想了下回答方法二：通过定时器setTimeout监听局部变量，确保两个异步操作执行完了再执行新操作。 面试官回复：这种方式性能不好，能不能想到一个简单又更合理的方法。当时思考未果所以把这个问题放上来寻求最好的方法是什么？欢迎讨论指点

Answer 1

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()