promise的简介及用法

一、promise是什么?

promise 是一种异步编程的解决方案,它可以实现把异步操作按照同步操作的流程表达出来。它可以接收一个异步请求,然后在其then方法可以得到前面异步请求的结果进行后续操作,使用链式调用的方式将异步请求的结果按照同步的方式表达出来。它其实是一个构造函数,自己身上有all、reject、resolve这几个方法,原型上有then、catch等方法。
原型:每一个javascript对象(除null外)创建的时候,都会与之关联另一个对象,这个对象就是我们所说的原型,每一个对象都会从原型中“继承”属性。

二、Promise的作用:

1,主要是用来解决回调嵌套(执行完后再去执行某一些操作,这时候容易形成嵌套再嵌套的问题)的问题,也就是常见的"回调地狱";
2,执行多并发请求获取数据;

三、Promise的创建:

promise 的参数是一个回调函数,回调函数中有两个参数分别是resolve, reject。 resolve 用来返回异步请求成功的结果 reject 用来返回异步请求失败的结果。
下面来看看promise的基本语法

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

三、Promise的优缺点:

优点:有了 Promise 对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise 对象提供统一的接口,使得控制异步操作更加容易。
缺点:首先,无法取消 Promise,一旦新建它就会立即执行,无法中途取消。其次,如果不设置回调函数,Promise 内部抛出的错误,不会反应到外部。第三,当处于 Pending 状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。

四、Promise常用的方法:

1,类方法(静态方法):

resolved:成功状态返回一个 Promise 对象;

reject:失败状态返回一个Promise 对象;

race:多个 Promise 任务同时执行,返回最先执行结束的 Promise 任务的结果,不管这个 Promise 结果是成功还是失败;

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

all:如果全部成功执行,则以数组的方式返回所有 Promise 任务的执行结果,如果有错误就返回reject的结果;

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

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

            })

2,实例方法:

.then链式:为 Promise 注册回调函数,函数一定要一个返回结果或者一个新的 Promise 对象,才可以让之后的then 回调接收;

.catch:异常处理 用于指定发生错误时的回调函数。

        //  基本语法
        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 .结合 await async 将异步代码同化 接口封装

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); // 这里以同步的方式 获得异步结果
 }  

使用场景2 .按顺序获得异步请求的结果

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,290评论 6 491
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,107评论 2 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,872评论 0 347
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,415评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,453评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,784评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,927评论 3 406
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,691评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,137评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,472评论 2 326
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,622评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,289评论 4 329
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,887评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,741评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,977评论 1 265
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,316评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,490评论 2 348

推荐阅读更多精彩内容

  • 原自 阮一峰老师的 ECMAScript 6 入门关注我的个人博客:pinbolei.cn,获取更多内容 1.什么...
    pinbolei阅读 254评论 0 1
  • Promise是javascript中异步编程的一种解决方案,和传统的异步编程方案(回调、事件)相比,使用更加简洁...
    boyrt阅读 6,177评论 1 2
  • 概述 Promise 对象是 JavaScript 的异步操作解决方案,为异步操作提供统一接口。它起到代理作用(p...
    微志异阅读 339评论 0 0
  • 目录 1.什么是Promise[https://blog.csdn.net/qq_34645412/article...
    Michael113c阅读 510评论 0 0
  • ES6 Promise 用法讲解 Promise是一个构造函数,自己身上有all、reject、resolve这几...
    这刻我懂了阅读 654评论 0 1