当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 异步编程笔记

异步编程笔记

2020年04月19日  | 移动技术网IT编程  | 我要评论

环境：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')
    }
})()

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网