promise的基本用法

Promise 是Es6新增的异步编程的一种方案。从语法上讲,Promise 是一个对象,它可以获取异步操作的消息。Promise对象, 可以将异步操作以同步的流程表达出来。

一、使用 Promise 主要有以下好处:

1.可以很好地解决回调地狱的问题(避免了层层嵌套的回调函数)。
2.语法非常简洁。Promise 对象提供了简洁的API,使得控制异步操作更加容易。

回调地狱的举例:

假设买菜、做饭、洗碗都是异步的。
但真实的场景中,实际的操作流程是:买菜成功之后,才能开始做饭。做饭成功后,才能开始洗碗。这里面就涉及到了多层嵌套调用,也就是回调地狱。

二、Promise 的基本用法

(1)使用new实例化一个Promise对象,Promise的构造函数中传递一个参数。这个参数是一个函数,该函数用于处理异步任务。

(2)并且传入两个参数:resolve和reject,分别表示异步执行成功后的回调函数和异步执行失败后的回调函数;

(3)通过 promise.then() 处理返回结果。这里的 p 指的是 Promise实例。

三、Promise 自带的API提供了如下实例方法:

promise.then():获取异步任务的正常结果。
promise.catch():获取异步任务的异常结果。

代码举例如下:

//基本语法
var p = new Promise(function(resolve,reject){
            //进行异步请求
            //如果异步请求成功就把请求结果放入resolve
            if (a == 1) {
                resolve(‘请求成功的信息’)
            } else {
           //如果异步请求失败就把请求结果放入reject
                reject(‘请求失败的信息’)
            }
        });
         p.then(
            function (res1) {//promise的第一个then中的第一个函数 function 1 用来处理resolve
                console.log(res1);//请求成功的信息
            },
            /* function(res2){//promise的第一个then中的第二个函数 function 2 用来处理reject
                console.log(res2);//请求失败的信息
            } */
        ).catch(function (er) {//捕获错误
            if (er) {
                console.log(er);//请求失败的信息
            }
        }).then(function (res2) {//第二个then 是第一个then结束后的回调函数
            console.log('处理完成');
        })

语法总结:

1.promise 的参数是一个回调函数,回调函数中有两个 参数人别是resolve, reject resolve 用来返回异步请求成功的结果 reject 用来返回异步请求失败的结果

  1. promise 的对象将异步请求结果保存后,需要使用第一个 .then来获取结果resolve函数返回的结果 .catch 获取reject 返回的结果。当然第一个.then()方法,括号里面有两个参数,分别代表两个函数 function1 和 function2;
    *如果promise的状态为fullfilled(意思是:如果请求成功),则执行function1里的内容
    *如果promise的状态为rejected(意思是,如果请求失败),则执行function2里的内容
    (上述问题可以查看代码~)
    3.promise 还可以使用 第二个.then 它是第一个.then的回调函数,这里可以继续处理其他逻辑(一般不经常使用)

四、Promise 自带的API提供了如下对象方法:

Promise.all():并发处理多个异步任务,所有任务都执行成功,才能得到结果。
Promise.race(): 并发处理多个异步任务,只要有一个任务执行成功,就能得到结果。

Promise.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中的 任何一个请求失败,将不会有返回结果。

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'   这里只返回一个执行最快的结果
        })

···

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

···

总结:Async-Await (语法参考上方代码)

Async-Await可以说是异步编程的最高境界,就是隧道尽头的亮光,很多人认为他是异步操作的终极解决方案,它和promise的关系不存在谁替换谁,因为它是寄生于promise。
async和await在干什么,async用于申明一个function是异步的,而await可以认为是async wait的简写,await只能在async这个函数里面使用,表示在这里等待一个异步方法(promise返回结果后)再继续执行。
需要注意的就是await是强制把异步变成了同步,这一句代码执行完,才会执行下一句,所以async/await需要谨慎使用。

javascript的宏任务和微任务

看一道常见面试题

               setTimeout(
                      function(){
                      console.log('1')  //异步 4
                  }
              );
     
    new Promise(
        function(resolve, reject){
            resolve()
            console.log('2'); //同步    1
        }).then(function(){
            console.log('3')  //异步  3
        });
     
    console.log('4');  ///同步   2

此题输出顺序为 2=>4=>3=>1 因为js代码执行机制为先执行同步代码(也叫顺序执行),同步代码执行完毕后才会执行异步代码,setTimeout和prominse.then()都是异步代码,但是prominse.then()会比setTimeout先执行。

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

推荐阅读更多精彩内容

  • Promise/A+规范 一、 promise应用场景 1 解决回调地狱比如我们经常可能需要异步请求一个数据之后作...
    Keely阅读 22,564评论 2 9
  • 参考链接: Promise.then链式调用顺序[https://blog.csdn.net/z591102/ar...
    Gen_阅读 4,893评论 0 2
  • 1. promise要解决的问题: 脑筋急转弯:把牛关进冰箱里,要分几步? 很显然,这三个操作不能颠倒顺序,否则任...
    月上秦少阅读 1,572评论 0 3
  • Promise 对象 Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函...
    neromous阅读 8,703评论 1 56
  • 前言 若是对执行队列,宏任务,微任务的不太理解的,建议先阅读 这一次,彻底弄懂 JavaScript 执行机制(别...
    lessonSam阅读 769评论 0 1