promise是什么

时间:2021-6-12 作者:qvyue

1、什么是promise?

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

2、promise的基本语法 上代码

        //  基本语法
        var p = new Promise(function(resolve,reject){
            if("异步请求成功"){
                resolve('成功的结果')
            }else{
                reject('失败的信息')
            }
        });

        p.then(
            function(res1){
                console.log(res1)    //promise的第一个then 中的第一个函数用来处理 resolve  
            },
            // function(res2){              
            //     console.log(res2)  // then的第二个函数也可以用来 接收reject的返回值
            // }

        ).catch(function(error){
            // 捕获错误 
            if(error){
                console.log(error);
            }
        }).
        then(function(er){        // 第二个then是第一个then结束后的回调函数
           // 第一个then 处理结束后的回调函数
           console.log('处理完成');
        })

语法总结

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

3、prmise.all的用法

prmise.all 语法

            var p1 = new Promise(function(resolve,reject){
                setTimeout(function(){
                    resolve('p1完成')
                },1000)
            })
            var p2 = new Promise(function(resolve,reject){
                setTimeout(function(){
                    resolve('p2完成')
                },2000)
            })
            var p3 = new Promise(function(resolve,reject){
                setTimeout(function(){
                    resolve('p3完成')
                },3000)
            })

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

            })

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

4、prmise.race的用法

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

5、promise 结合 await async 封装接口api

var token = JSON.parse(localStorage.getItem('userIfo')).remember_token
function http(url, type, data = '') {
    let p = new Promise((resolve, reject) => {
        if (token) {
            $.ajax({
                headers: {
                    Authorization: 'Bearer ' + token
                },
                url,
                type,
                data,
                success: (res) => {
                    resolve(res)
                },
                error: (er) => {
                    reject(er)
                }
            })
        }

    })
    return p
}

function getNav() {
    return http(`http://120.xx.xx.103:84/api/menu/info`, 'post')
}
function getList(n,status,nickname,mobel) {
   return http(`http://120.xx.xx.103:84/api/user?page=${n}&limit=10&status=${status}&nickname=${nickname}&mobile=${mobel}&`, 'get')
}

// 调用

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


声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。