1

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...


记得要微笑
1.9k 声望4.5k 粉丝

知不足而奋进,望远山而前行,卯足劲,不减热爱。