ajax、promise、async/await区别

1、传统的Ajax请求

var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP")

xhr.onreadystatechange = function()
{
    if (xhr.readyState === 4 && xhr.status === 200)
    {
        // coding
    }
}
xhr.open("GET","xxx",true)
xhr.send()

当请求里面还需要请求，Ajax只能嵌套使用，这种嵌套回调会造成代码可读性非常差，不利于理解和维护

2、promise

Promise 通过 then 链来解决多层回调的问题。
深度理解promise中then方法的作用，请参考https://segmentfault.com/a/11...

// 用promise封装Ajax
var post = (url, params) {
    return new Promise((resolve, reject) => {
        var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP")
        xhr.onreadystatechange = function()
        {
            if (xhr.readyState === 4 && xhr.status === 200)
            {
                // coding
                resolve(xhr.responseText)
            }
        }
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
        xhr.open("POST", url, true)
        xhr.send(JSON.stringify(params))
    })
}

// promise请求处理嵌套回调，形成链式回调
// 第一个then返回一个promise对象，第二个then接收第一个then返回promise对象的resolve值
post(url, params).then(res => post('xxx', res)).then(re =>{
    console.log(re)
})

参考：
https://segmentfault.com/q/10...

3、async/await

async/await的出现是为了处理promise链式调用过长问题，async/await可以让我们同步书写请求嵌套，看完下面例子之后是不是觉得async/await处理嵌套回调请求更加方便

// 假设一种场景，现有一个A请求，然后B请求依赖A请求返回的数据，C请求依赖B请求返回的数据...

// promise
post('A', data)
    .then(res1 => post('B', res1))
    .then(res2 => post('C', res2))
    .then(res3 => post('D', res3))
    .then(res4 => post('E', res4))
    ...
    
// async/await
async handler() {
    let a = await post('A', data)
    let b = await post('B', a)
    let c = await post('C', b)
    let d = await post('D', c)
    ...
}

参考：
深度理解async/await：https://segmentfault.com/a/11...