异步编程笔记

环境：chrome 80
演习：用Promise async/await封装$.ajax

Promise

第一次请求成功，接着请求第二次

// 先引入jq <script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script> 
let {log} = console;
function request(url) {
    return new Promise((resolve,reject)=>{
        $.ajax({
            url: 'http://rap2.taobao.org:38080/app/mock/251242'+url,
            success(res) {
                resolve(res)
            }
        })
    })
}
// 第一次请求
request('/example/1587179172695').then((res)=>{
    log(res)
    return request('/getUserList') // 第二次请求
}).then((res2)=>{
    log(res2) // 请二次请求成功
}).catch((err)=>{
    log(err)
})

多个请求全部成功，才执行下一步操作

// 先引入jq <script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script> 
let { log } = console;
// 请求1
let p1 = new Promise((resolve, reject) => {
    log('Started one')
    resolve('one')
})
// 请求2
let p2 = new Promise((resolve,reject)=>{
    log('Started two')
    resolve('two')
})
let all = Promise.all([p1,p2]);
//只要有一个请求resolve(),reject()都没有运行的话，下面的就不会运行
all.then((data)=>{
    log(data) //['one','two'] p1,p2 全部成功后执行
},()=>{
    log('Fail') // 只要有一个失败，就执行这里
})

多个请求，全部执行完毕后进行操作

// 先引入jq <script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script> 
let { log } = console;
// 请求1
let p1 = new Promise((resolve, reject) => {
    log('Started one')
    reject('one')
})
// 请求2
let p2 = new Promise((resolve,reject)=>{
    log('Started two')
    resolve('two')
})
let all = Promise.allSettled([p1,p2]);
//只要有一个请求resolve(),reject()都没有运行的话，下面的就不会运行
all.then((data)=>{
    // p1,p2 全部运行后执行
    log(data) //[{status: "rejected" reason: "one"},{status: "rejected" reason: "one"}] 
})

async/await

第一次请求成功，接着请求第二次

// 先引入jq <script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script> 
let {log} = console;
function request(url) {
    return new Promise((resolve,reject)=>{
        $.ajax({
            url: 'http://rap2.taobao.org:38080/app/mock/251242'+url,
            success(res) {
                resolve(res)
            }
        })
    })
}
(async ()=>{
    try {
        // 第一次请求
        let data = await request("/example/1587179172695")
        if (data) { // 第一次请求成功
            log(data)
            let list = await request('/getUserList') // 第二次请求
            log(list);
        }
    } catch(e) {
        // 请求失败
        log('fail')
    }
})()

多个请求全部成功，才执行下一步操作

// 先引入jq <script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script> 
let {log} = console;
function request(url) {
    return new Promise((resolve,reject)=>{
        $.ajax({
            url: 'http://rap2.taobao.org:38080/app/mock/251242'+url,
            success(res) {
                resolve(res)
            }
        })
    })
}
(async ()=>{
    try {
        // 第一次请求
        let data = await request("/example/1587179172695")
        let list = await request('/getUserList') 
        let fulfilled = ![data,list].includes(null)
        if (fulfilled) { // 全部成功
            log(data)
            log(list);
        }
    } catch(e) {
        // 请求失败
        log('fail')
    }
})()