使用Ajax依次请求三个文件的4种方法

eg. a.json -> b.json -> c.json

1、利用Callback Hell 回调地狱

ajax函数：

function ajax(url, callback) {
    // 1)创建对象
    var xmlhttp // 此处使用var是为了兼容老版本浏览器
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest()
    } else { // 兼容早期浏览器
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP')
    }
    // 2)发送请求
    xmlhttp.open('GET', url, true)
    xmlhttp.send()
    // 3)服务器响应
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
            var obj = JSON.parse(xmlhttp.responseText)
            // console.log(obj)
            callback(obj)
        }
    }
}

调用ajax

ajax('static/a.json', res => {
    console.log(res)
    // b在a的回调函数中执行
    ajax('static/b.json', res => {
        console.log(res)
        ajax('static/c.json', res => {
            console.log(res)
        })
    })
})

2、利用Promise

ajax函数：

function ajax(url, successCallback, failCallback) {
    // 1)创建对象
    var xmlhttp // 此处使用var是为了兼容老版本浏览器
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest()
    } else { // 兼容早期浏览器
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP')
    }
    // 2)发送请求
    xmlhttp.open('GET', url, true)
    xmlhttp.send()
    // 3)服务器响应
    xmlhttp.onreadystatechange = function () {
        // 4:响应完成 200:成功
        if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
            var obj = JSON.parse(xmlhttp.responseText)
            // console.log(obj)
            // 如果没有传递obj参数，直接 successCallback
            successCallback && successCallback(obj)
        } else if (xmlhttp.readyState === 4 && xmlhttp.status === 404) {
            failCallback && failCallback(obj)
        }
    }
}

getPromise()

function getPromise(url) {
    return new Promise((resolve, reject) => {
        ajax(url, res => {
            resolve(res)
        }, err => {
            reject(err)
        })
    })
}

调用

// 1) 三种都成功
 getPromise('static/a.json')
     .then(res => {
         console.log(res) // {a: 'A'}
         return getPromise('static/b.json')
     }).then(res => {
     console.log(res) // {b: 'B'}
     return getPromise('static/c.json')
 }).then(res => {
     console.log(res) // {c: 'C'}
 })

// 2)a失败
 getPromise('static/aa.json')
     .then(res => {
         console.log(res) // Not Found
         return getPromise('static/b.json')
     }, err => {
         console.log(err) // undefined
         // 注意：a即使是失败了，也要return getPromise，因为这里创建了b的Promise，
         // 否则后边b将输出undefined，因为如果没有return，b的Promise就是空
         return getPromise('static/b.json')
     }).then(res => {
     console.log(res) // {b: 'B'}
     return getPromise('static/c.json')
 }).then(res => {
     console.log(res) // {c: 'C'}
 })

// 3) 统一管理失败状态
getPromise('static/a.json')
    .then(res => {
        console.log(res) // {a: 'A'}
        return getPromise('static/bb.json')
    }).then(res => {
    console.log(res) // Not Found
    return getPromise('static/c.json')
}).then(res => {
    console.log(res) // 无
}).catch(err => { // 统一管理失败的状态，如果a成功，b不成功
    // a:正常, b:Not Found, c:无
    console.log(err) // undefined
})

3、利用生成器函数Generator

ajax函数

function ajax(url, callback) {
    // 1)创建对象
    var xmlhttp // 此处使用var是为了兼容老版本浏览器
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest()
    } else { // 兼容早期浏览器
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP')
    }
    // 2)发送请求
    xmlhttp.open('GET', url, true)
    xmlhttp.send()
    // 3)服务器响应
    xmlhttp.onreadystatechange = function () {
        // 4:响应完成 200:成功
        if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
            var obj = JSON.parse(xmlhttp.responseText)
            // console.log(obj)
            callback(obj)
        }
    }
}

生成器函数及其调用

function request(url) {
    ajax(url, res => {
        getData.next(res)
    })
}

function* gen() {
    let res1 = yield request('static/a.json')
    console.log(res1)
    let res2 = yield request('static/b.json')
    console.log(res2)
    let res3 = yield request('static/c.json')
    console.log(res3)
}

let getData = gen()
getData.next()

调用顺序：gen() -> request() -> ajax()

4、利用async/await (最常用)

import ajax from './ajax'
function request(url) {
    return new Promise(resolve => {
        ajax(url, res => {
            resolve(res)
        })
    })
}
async function getData() {
    const res1 = await request('static/a.json')
    console.log(res1) // {a: 'A' }
    const res2 = await request('static/b.json')
    console.log(res2) // {b: 'B'}
    const res3 = await request('static/c.json')
    console.log(res3) // {c: 'C'}
}
getData()