Promise的用法和使用场景,以及使用promise封装接口的API

一、什么是promise?

    是es6的新增语法,用来解决异步问题,接口套接口的回调地狱问题

二、promise的基本语法

                        var a = 2;
                        var p = new Promise(function (resolve, reject) {
                            if ('异步请求成功') {
                                resolve('成功的结果')
                            } else {
                                reject('失败的结果')
                            }
                        });
                        p.then(
                            function (res1) {
                                console.log(res1)    // 成功resolve promise 的第一个then中的第一个函数来处理
                            },
                            //可以写俩个函数
                            function(res2){
                                console.log(res2);//then的第二个函数也可以用来接受reject的返回值   2
                            }
                        ).catch(function (error) {//必须写
                            // 捕获错误
                            if (error) {
                                console.log(error)
                            }
                        }).
                            then(function (er) {//第二个then是第一个then结束后的回调函数
                                // 第一个then 处理结束后的回调函数
                                console.log('处理完成')
                            })
                    // 获得reject 的结果 使用catch   then 也是可以捕获的,但是会报错

语法总结:
1、promise的参数是一个回调函数,回调函数中有有俩个参数分别是 resolve,reject
resolve用来返回异步请求成功的结果
reject用来返回异步请求失败的结果
2、promise的对象将异步结果保存后 需要使用第一个.then来获取结果resolve函数的返回结果 .catch 获取reject返回结果 。当然我们也可以在第一个.then中的第二个回调函数获得reject返回的结果(以上问题可以查看代码)
3、promise还可以使用第二个.then是第一个.then的回调函数,这里既可以继续处理其他逻辑(个人感觉有些马后炮的意思所以不经常使用,所以出现的概率有点低)

三、promise.all的用法

1、promise.all语法

    var p1=Promise(function(resolve,reject){
               setTimeout(function(){
                   resolve('p1完成')
               },1000)
           })
           var p2=Promise(function(resolve,reject){
               setTimeout(function(){
                   resolve('p1完成')
               },2000)
           })
           var p3=Promise(function(resolve,reject){
               setTimeout(function(){
                   resolve('p1完成')
               },3000)
           })
           Promise.all([p3,p2,p1]).then(function(res){
               console.log(res);
               //p3,p2,p1是我们调用的顺序 ["p3完成","p2完成","p1完成"]是我们返回的结果
               //可以看得出来,我们控制了3个异步请求的返回顺序
           })

总结 :promise.all的使用场景就是可以同时处理多个异步请求并控制他们返回【结果的顺序】
注意:promise.all中的任何一个请求,都将不会有返回结果

四、promis.race的用法

        var p1=new Promise(function(resolve,reject){
            setTimeout(function(){
                resolve('p1');
            },1000)
        });
        var p1=new Promise(function(resolve,reject){
            setTimeout(function(){
                resolve('p1');
            },30)
        });
        Promise.race([p1,p2]).then(function(data){
            console.log(data);//'p2'  这里只返回一个执行最快的结果
        })

五、promise结合await asyan封装接口API

var token = JSON.parse(localStorage.getItem('userInfo')).remember_token
function http(url, type, data = '') {
  var p =  new Promise((v, b) => {
        $.ajax({
            headers: {
                Authorization: 'Bearer ' + token
            },
            url,
            type,
            data,
            success: (res) => {
                v(res)
            },error:(er)=>{
                b(er)
            }
        })
    })
    return p
}

function getNav(){
    return http('http://***.**.**.***:**/api/menu/info','post')
}
function getList(pageNum,statues,nickname,mobile){
    return http(`http://***.**.**.***:**/api/user?page=${pageNum}&limit=10&status=${statues}&nickname=${nickname}&mobile=${mobile}&`,'get')
}

调用:

          async function List(n, status, nickname, mobel) {
                var list = await getList(n, status, nickname, mobel)
                //这个将 异步的接口封装,同步化
                console.log(list);//这里以同步的方式  获取异步结果
            }

你可能感兴趣的:(Promise的用法和使用场景,以及使用promise封装接口的API)