欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

异步编程笔记

程序员文章站 2022-06-28 19:10:46
环境:chrome 80 演习:用 `Generator`封装$.ajax Promise 第一次请求成功,接着请求第二次 多个请求全部成功,才执行下一步操作 多个请求,全部执行完毕后进行操作 Generator 第一次请求成功,接着请求第二次 多个请求全部成功,才执行下一步操作 ......

环境:chrome 80
演习:用promise generator封装$.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"}] 
})

generator

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

// 先引入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')
    }
})()