ES6 Promise

来源:互联网 发布:windows程序闪退日志 编辑:程序博客网 时间:2024/05/18 02:30

本文是在阅读了别人的博客后,加入自己的理解写下的,如有理解错误的地方还请告知,谅解~
这里写图片描述
1.定义:
Promise是一个构造函数,自己身上有all、reject、resolve这几个眼熟的方法,
原型上有then、catch等同样很眼熟的方法.
2.简单例子

import es6 from '../helper/es6-promise'  var p = new es6.Promise(function (resolve, reject) {      setTimeout(function () {        console.log('执行成功')        resolve('执行成功后的回调函数')        reject('执行失败后的回调函数~~')      }, 2000)    })

在上面的代码中,我们执行了一个异步操作,也就是setTimeout,2秒后,输出“执行完成”,并且调用resolve方法。

Promise的构造函数接收一个函数,且函数需要两个参数,表示异步操作执行成功和失败之后的回调函数
resolve:是将Promise的状态设置为fullfiled
reject:是将Promise的状态设置为rejected。

3.方法提取
上面的代码中我们只是new了一个对象,并没有调用,但是已经执行了,所以我们在用Promise的时候一般是包裹在一个函数中,需要的时候在调用

  function runAsync  () {    var p = new es6.Promise(function (resolve, reject) {      setTimeout(function () {        console.log('执行成功')        resolve('执行成功后的回调函数')        reject('执行失败后的回调函数~~')      }, 2000)    })    return p  }

ok,Promise是个什么鬼,简单的认识了一个下,但resolve,reject,then,怎么用???

——————————————————————————————————-
执行完runAsync()函数之后会返回一个Promise对象,还记得Promise对象有then,catch方法,这就是它的强大之处。

    runAsync().then(function (data) {      console.log(data)    })

then函数接受一个参数,是函数,会拿到在runAsync中调用resolve时传的参数。以上代码输出的结果是:
执行成功
执行成功后的回调函数

对于在runAsync这个异步任务执行完成之后被执行。这就是Promise的作用了,简单来讲,就是能把原来的回调写法分离出来,在异步操作执行完后,用链式调用的方式执行回调函数。

4.提问:就是个回调返回,如果我把回调封装一下,给runAsync传进去不也一样吗?

 runAsync: function (callBack) {    setTimeout(function () {      console.log('执行成功')      callBack("方法回调,返回数据")    }, 2000)  }  runAsync(function (data) {      console.log(runAsyncA)  })

答案是:如果是多层回到怎么办,如果callBack也是一个异步操作且执行后也需要相应的回调函数怎么办,所以Promise的then优势就体现出来了,在then方法中返回的Promise对对象并返回

5.链式操作

6.reject的用法

 function runAsync() {      var p = new es6.Promise(function (resolve, reject) {        console.log('执行成功')        if(true)                resolve('执行成功后的回调函数')    else            reject('执行失败后的回调函数~~')      })      return p}runAsync().then(      function (data) {        console.log('resolve')        console.log(data)      },      function (data) {        console.log('reject');        console.log(data);      })

7.catch的用法
作用1:用来接收reject的回调
作用2:在执行resolve的回调(也就是上面then中的第一个参数)时,如果抛出异常了(代码出错了),那么并不会报错卡死js,而是会进到这个catch方法中。

  runAsync()      .then(function (data) {        console.log('resolved');        console.log(data);        console.log(somedata); //此处的somedata未定义      })      .catch(function (reason) {        console.log('rejected');        console.log(reason);      })

在.then中我们并没有定义somedata,所以会报错,如果我们没有使用Promise,代码的错误回被输出到控制台中,不在往下运行,但是使用catch,会直接将错误在catch中输出,几遍有错误也不会报错,这与使用的try/catch类似

8.all的用法
Promise.all方法提供了并行执行异步操作的能力,并且在所有异步操作完成后才执行回调
「谁跑的慢,以谁为准执行回调」

Promise.all([runAsync1(), runAsync2(), runAsync3()]).then(function(results){    console.log(results);});

1.用Promise.all来执行,all接收一个数组参数,里面的值最终都算返回Promise对象。
2.三个异步操作的并行执行的,等到它们都执行完后才会进到then里面
3.三个异步操作返回的结果都在then里面呢,all会把所有异步操作的结果放进一个数组中传给then,就是上面的results

9.race的用法
「谁跑的快,以谁为准执行回调」,在then里面的回调开始执行时,其他并行函数并没有停止,仍旧再执行。
给某个异步请求设置超时时间,并且在超时后执行相应的操作

es6.Promise.race([b.run(), b.timeOut()]).then(function (results) {      console.log(results)})
原创粉丝点击