ES6学习笔记---Promise和异步函数

引言

在Javasc里面,所有的代码都是单线程执行的,所以导致JS中所有的事件都必须异步执行。比如setTimeout(callback,1000),异步执行一般是通过调用回调函数来实现,用的最多的ajax

request.onreadystatechange = function () {
    if (request.readyState === 4) {
        if (request.status === 200) {
            return success(request.responseText);
        } else {
            return fail(request.status);
        }
    }
}

把回调函数写在ajax里面,既不好看也不利于代码复用,所以Promise出来了

正文

Promise的语法

new Promise(function(resolve,reject){   //实例一个promise对象
      if(true){
        resolve("aaaa");  //promise的第一个参数,表示成功,接下来会执行then()
      }else{
        reject("bbbbb");  //同上,表示失败,接下来会执行catch()
      }
  })      //执行函数
.then(function(result){console.log(result)}) //resolve调用then()  输出"aaaa"
.catch(function(reason){console.log(reason)}) //reject调用catch() 输出"bbbbb"

Promise的特点

  1. 对象的状态不受外界干扰,也就是说一旦执行了就停不下来,而且执行结果也无法更改。promise有三种状态:pending(执行中),fulfilled(成功),rejected(失败)。这三个状态其实就是个概念,没甚用。
  2. 状态改变后就不会再变,也就是说函数执行完好久好久了,给它加个回调函数它仍然能立即返回结果。

Promise连环使用

new Promise().then().then().then().catch()

上面的代码依次指定了三个回调函数,第一then()执行完(必须包含return语句),将返回结果作为参数传给下一个then()

then()有两个参数,then(function(){},function(){})第一个是resolve的回调函数,第二个可选参数是reject的回调函数,相当于catch()。不过一般不会这样用,因为Promise对象的错误有冒泡的特性,会一直传递,上面例子的catch()语句可以捕获三个then()里面的错误,当捕获到错误时,后面的then()就会跳过,不再执行。

Promise的执行顺序

new Promise(function(resolve,reject){
    console.log(1)
    setTimeout(function(){
       console.log(2)
  },101)
  resolve()
}).then(function(res){
    console.log(3)
});
console.log(4)
setTimeout(function(){
    console.log(5)
},100)

结果是 1 4 3 5 2

粗浅分析:假如上面的代码是一个线程的,那么setTimeout()其实是在下一个线程上执行,new Promise()的参数函数时立即执行的,Promisethen()这是这当前线程的最末尾执行,所以setTimeout()时最晚执行的,先输出5,是因为一个是100ms,一个是101ms

finally语句

new Promise().then().catch().finally()

跟try..catch语句一样,finally不管怎样都要执行的

Promise.all()

Promise.all([p1,p2,p3]).then()

参数是Promise实例的数组,当P1,P2,P3都执行完的时候再执行then()

var p1 = new Promise(function(resolve,reject){
    resolve(1)
})
var p2 = new Promise(function(resolve,reject){
    resolve(2)
})
Promise.all([p1,p2]).then(function(res){
    console.log(res)   //[1,2]
})

then()接收的值是所有实例对象返回值组成的数组

Proomise.race()

Promise.race([p1,p2,p3]).then()

Promise.all()类似,不同的是race哪个实例先执行完立马调用then()

引出async

Promise有一种情况,ajax请求接口返回id,用返回的id去ajax请求另外一个接口,用Promise实现如下:

var p1 = new Promise(function(resolve,reject){
    setTimeout(function(){resolve(1)},100);
})
p1.then(function(id){
    new Promise(function(resolve,reject){
    setTimeout(function(){resolve(id+1)},100);
}).then(function(name){
    console.log(name)
})
})

这仅仅是一次嵌套而且代码简单可读性就很差,如果多次嵌套那绝对看眼花,所以引入async函数,用async重写

(async function(){
    let id = await new Promise(resolve => setTimeout(()=>resolve(1),100))
    let name  = await new Promise(resolve => setTimeout(()=>resolve(id+1),100))
    console.log(name)
})()

从上至下,一目了然

异步函数

存在的意义:提高promise的可读性

语法:

async function mytest(){
    try{
        const returnValue = await promise;
    }
    catch(rejectedValue){
        //
    }
}

如果在函数开头使用关键字async,就可以在函数里面使用await,当await
某个promise时,函数会暂停执行,直到该promise产生结果,并且暂停不会阻塞
主线程。

示例

function logFetch() {
    return fetch(url).then(response => responset.text())
    .then(text => {
        console.log(text);
    }).catch(err => {
        console.log(err);
    })
}

使用异步函数重写

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

推荐阅读更多精彩内容

  • Promiese 简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果,语法上说,Pr...
    雨飞飞雨阅读 3,352评论 0 19
  • 弄懂js异步 讲异步之前,我们必须掌握一个基础知识-event-loop。 我们知道JavaScript的一大特点...
    DCbryant阅读 2,706评论 0 5
  • Promise含义 Promise是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更强大。所谓Pr...
    oWSQo阅读 1,083评论 0 4
  • Promise 对象 Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函...
    neromous阅读 8,702评论 1 56
  • 来这写日记才想起工作汇总没写,挽救了我一顿饭钱呀。 今天看的是有点技术含量的视频,ctrl+A是全选,要排序和筛选...
    LULU谢大露阅读 60评论 0 0