异步回调 2 - ES6 Promise

如果浏览已经有了Promise对象，那么页就说明浏览器的js引擎里已经有了Promsise队列，这样就可以利用Promise将任务放在它的队列中

目前在浏览器中大部分已经支持了Promise，除了IE，Promise是在ES6中javascript实现了prmose规范，和JQuery中的$.Deferred大概思路是一样的，可能是部分API的用法有差异

Promise对象有三种状态，分别是

  • pending：等待/进行中，表示还没有得到结果
  • resolved：已经完成，表示得到了我们想要的结果，允许继续向下执行
  • rejected：表示结果错误，拒绝执行

这三种状态不受外界影响，而且状态只能从pending改变为resolved或者rejected，并且不可逆，在Promise对象的构造函数中，将一个函数作为第一个参数，而这个函数就是用来处理Promise的状态变化

new Prmise(function(resolve,reject){
  if(true){ resolve(msg)};
  if(false){ reject(msg)};
})

上面的resolve和reject都是一个函数，他们的作用分别是将状态修改为reslolved和rejected，resolve用于在异步操作成功时调用，并将异步操作的结果作为参数传递出去,reject会在异步操作失败时调用，并将异步操作报出的错误作为参数传递出去

promise实例生成以后，可以使用then方法分别指定resolved状态和rejectd状态的回调函数，该方法接收两个回调函数作为参数，第一个回调函数是promise对象的状态变为resolved时调用，第二个回调函数是在promise对象状态变为rejected时调用，其中第二个函数是可选的，这两个函数都接收promise对象传出的值作为参数，注意一点promise中的方法会立即执行，不会进入队列，但是then中的方法会延后执行，then中的方法会进入微队列，在本次队列的其它函数执行完成之后再执行

let promise=new Promise(function (resolve,reject) {
    console.log('promsie');
    resolve()
});

promise.then(function () {
    console.log('resolved');
})
    
console.log("HI");
//promise
//HI
//resolved

注意，调用resolve或reject并不会终结promise的参数的执行，因为我们在在函数中调用resolve，resolve是在本轮事件循环末尾，是晚于本轮同步循环任务的，而且，一般来说，调用resolve或reject后，promise的使命就已经完成了，不应该再在他后面写操作，而应该吧操作放置到then中，所以一般会在调用resolve或reject时在它们前面加上return语句，防止意外

new Promise((resolve,reject)=>{
    return resolve("data");
    console.log("hello");//如果不添加return，那么hello仍然会输出
})
    .then(data=>{
        console.log(data);
    })

reject函数的参数通常是Error对象的实例，表示抛出错误;resolve函数的参数除了正常的值以外，还可能是另一个promise实例

let p1=new Promise((resolve,reject)=>{
    setTimeout(()=>reject(new Error('fail')),2000)
})
let p2=new Promise((resolve,reject)=>{
    resolve(p1)
})

p2.then(success=>console.log(success))
  .catch(error=>console.error(error))  

//Error: fail

在接收p1之后，因为p1本身是一promise对象，所以在p2的状态会被p1替换掉，p2自身的状态无效了，由p1返回的状态决定p2的状态，所以，p2的.then方法的触发条件都会由p1来决定

下面用promise对象实现一个getJSON函数

var getJSON = function (url) {
    var promise = new Promise(function (resolve, reject) {
        var client = new XMLHttpRequest();
        client.open("GET", url);
        client.onreadystatechange = handler;
        client.responseType = "json";
        client.setRequestHeader("Accept", "qpplication/json");
        client.send();

        function handler() {
            if (this.readyState !== 4) {
                return;
            }
            if (this.state === 200) {
                resolve(this.response)
            } else {
                reject(new Error(this.statusText));
            }
        };
    });
    return promise;
}

getJSON("/posts.json").then(function (data) {
    console.log(data);
}, function (error) {
    console.log(error);
})
Promise.prototype.then()

then方法是定义在原型对象Promise.prototype上的，需要注意的是then方法返回的是一个新的promise实例，所以可以采用链式写法，在第一个回调函数完成以后，会将返回结果作为参数，传入第二个回调函数

new Promise((resolve,reject)=>{
  resolve(data)
})
  .then(data=>{
    console.log(data)
    return success;
  })
  .then(data=>{
    console.log(data)
  })
  // data
  // success

采用链式的then，可以指定一组按照次序调用的回调函数，如果前一个函数返回的是一个promise对象，后一个回调函数就会等待该Promise对象的状态发生变化才会被调用

Promise.prototype.catch()

该方法是.then(null，rejection)的别名，用于指定发生错误时的回调函数，另外then方法指定的回调函数，如果运行中抛出错误，也会被catch方法捕获，Promise对象的错误具有"冒泡"性质，会一直向后传递，直到该错误被捕获

new Promise((resolve, reject) => {
    resolve('success')
    reject("promise对象运行错误") //在已经调用了resolve的情况下之后的reject不会起作用，该错误也不会被捕获
                               //因为我们之前已经了解promise对象的状态一旦改变就不会再次发生变化
    })
    .catch(error=>console.error(error))
    .then(data => {
        console.log(data);
        throw new Error("then运行错误")
    })
    .catch(error=>console.error(error))
    //success
    //then运行错误

一般来说，我们不会在then中定义reject状态的回调函数，总是使用catch方法，因为使用catch方法不仅会捕获当前promise对象的错误，也会捕获之前错误

我们可以观察下面的代码

.catch(error=>console.error(error))
.then(null,error=>console.log(error))
//以上代码是等价的

 try {
    x+2
}catch(e){
    reject(e)
}
reject(new Error("x is not defined"))
//以上代码是等价的
//可以理解为reject的作用就是抛出错误

和传统的try/catch代码块不同的是，如果没有使用catch方法指定错误处理的回调函数，promise对象抛出的错误不会传递到外层代码，也不会有任何反应，Promise内部的错误不会影响到Promise外部的代码，通俗的说就是Promise会吃掉错误，这是我们需要注意的，所以就要求我们如果我们Promise中代码会对后续代码有影响，一定注意要在Promise对象后面跟catch方法，这样可以处理Promise内部发生的错误，并且catch方法返回的还是一个Promise对象，因此后面还可以接着调用then方法，如果没有报错会跳过catch方法

new Promise((resolve,reject)=>resolve(x+2))
    .catch(error=>{
        if(error) {
            throw new Error(error)
          }
    })
    .then(data=>console.log(data));

console.log("下一个操作");
//如果没有catch方法来抛出错误
//浏览器在运行到x+2时会报出 x is not defined 的错误
//但不会停止程序，下面的操作不受影响
Promise.all()

Promise.all()方法用于将多个Promise实例，包装成一个新的Promise实例，类似于JQuery中$.when()方法，但不同之处在于，Promise.all()会自动将其中不是Promise实例的对象转化为Promise实例对象然后再执行函数

  • 如果其中有一个promise对象的状态为pending，那么all的会等待其状态变更后再执行
  • 如果其中有一个promise对象的状态为rejected，那么all的状态就会变成rejected，并将第一个变为rejected状态的实例的返回值会传递给all的回调函数
  • 只有所有的promise对象的状态都是resolved，all的状态才会变成resolved，此时所有传入的promise对象的返回值组成一个数组返回给all的回调函数
const p1 = new Promise((resolve, result) => {
    console.log("p1");
    resolve();
})

const p2 = new Promise((resolve, result) => {
    console.log("p2");
    resolve();
})
    .then(() => {
        console.log("p2执行完毕");
        return 2;
    })
const p3 = function () {
    console.log("p3执行完毕");
}
Promise.all([p1, p2, p3])
    .then((success) => {
        console.log(success);
    })

如果在Promise对象自身有then或catch方法，那么会优先执行每一个promise对象的then和catch方法，因为then和catch方法会返回一个promise对象，所以在执行完自身then和catch方法后会继续执行Promise.all的then和catch方法，如果当前的promise对象不存在then/catch方法，那么会调用Promise.all的then和catch方法，这里需要注意一点的是参数问题，如果调用了自身的then或catch方法，那么在Promise.all方法中接收的参数是then/catch中返回的值

Promise.race()

该方法和Promise.all()一样，同样是将多个promise实例包装成一个新的Promise实例

区别在于在Promise.race()中只要其中一个参数的状态发生改变，race的状态就会发生改变，并将第一改变状态的promise实例的返回值作为参数传递给race的回调函数

利用这个特性我们可以做一个如果函数执行时间超过我们设定的时间后报错的函数

 Promise.race([
    $.get('test.html',(res)=>{
        console.log(res)
    }),
    new Promise((resolve,reject)=>{
        setTimeout(()=>reject(new Error('request timeout')),5000)
    })
])
    .catch(error=>console.log(error))
    .then(success=>console.log(success))
Promise.resolve()

有时需要将现有对象转化为Promise对象，就可以使用Promise.resolve()方法，返回值为新的Promise对象，我们在使用Promise.all()方法和Promise.race()方法时，这两个方法对于我们传入的不是promise实例的对象也是默认使用了Promise.resolve方法对其中的对象进行了转换

例如我们要将一个JQuery的deferred对象转化为一个新的Promise对象

var promise=Promise.resolve($.ajax('./test.txt'))
//上面的方法其实等价于下面的写法
var promise=new Promise(resolve=>resolve($.ajax('./text.txt')))

Promise.resolve方法会根据传入的参数不同分为四种情况

  1. 参数是一个promise实例

    那么Promise.resolve将不会做任何修改，直接返回该实例

  2. 参数是一个具有then方法的thenable对象

    thenable对象就是指那些具有then方法名的对象，Promise.resolve()在接收该方法后会将该对象转化为promise对象，然后立即执行该对象的then方法

    var thenable={
 then(){
     console.log("then方法被执行啦");
 }
}
Promise.resolve(thenable) //then方法被执行啦

  3. 如果参数不是promise对象，并且不具有then方法，那么回返回一个新的promise对象，状态为resolved,并将自身返回给回调函数

    let  p={
        name:'tom'
    }
p = Promise.resolve(p);
p.then(function (res) {
 console.log(res);
})
//{name:'tom'}

  4. 不接收任何参数

    let p=Promise.resolve();

p.then(function(){
  //...
})
Promise.reject()

同Promise.resolve()的用法相同，不同的是会返回一个状态为rejected的实例，回调函数会立即执行

需要注意一点，Promise.reject()方法的参数，会不做任何改变的作为回调函数的参数传入，这也是两个方法的区别所在

let thenable={
    then(resolve,reject){
        reject("error")
    }
}
Promise.reject(thenable)
    .catch(err=>console.log(err === thenable))
//true

上面的代码最后的回调函数是将thenable方法整体作为参数接收了，而不是我们传入的error

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