異步編程筆記

環境：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 = https://www.cnblogs.com/niepeizhi/p/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 = https://www.cnblogs.com/niepeizhi/p/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')
    }
})()

標籤：JavaScript

上一篇：[javascript] 主流瀏覽器對ES6的支持情況

下一篇：JS變數型別和計算常見面試題分析