异步回调 2 - ES6 Promise

作者: 羊烊羴 | 来源:发表于2017-10-19 13:59 被阅读0次

如果浏览已经有了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方法会根据传入的参数不同分为四种情况

参数是一个promise实例

那么Promise.resolve将不会做任何修改，直接返回该实例
参数是一个具有then方法的thenable对象

thenable对象就是指那些具有then方法名的对象，Promise.resolve()在接收该方法后会将该对象转化为promise对象，然后立即执行该对象的then方法
```
var thenable={
 then(){
     console.log("then方法被执行啦");
 }
}
Promise.resolve(thenable) //then方法被执行啦
```
如果参数不是promise对象，并且不具有then方法，那么回返回一个新的promise对象，状态为resolved,并将自身返回给回调函数
```
let  p={
        name:'tom'
    }
p = Promise.resolve(p);
p.then(function (res) {
 console.log(res);
})
//{name:'tom'}
```

不接收任何参数

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

异步回调 2 - ES6 Promise

Promise.prototype.then()

Promise.prototype.catch()

Promise.all()

Promise.race()

Promise.resolve()

Promise.reject()

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

JavacScript