Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ES6中的promise对象 #7

Open
Abiel1024 opened this issue Apr 7, 2018 · 0 comments
Open

ES6中的promise对象 #7

Abiel1024 opened this issue Apr 7, 2018 · 0 comments

Comments

@Abiel1024
Copy link
Owner

Abiel1024 commented Apr 7, 2018

出现

Promise是异步编程的一种解决方案,最早由社区提出和实现,ES6 将其写进了语言标准,统一了用法。新版的chrome和firefox也已经支持该语法,如果要兼容低版本的浏览器,我们可以使用es6-promise这个polyfill库来处理。

基本用法

在了解基本用法之前,我们得先了解Promise的三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。
这三种状态只会根据异步操作的结果进行改变,任何其他的操作都没有办法改变。同时,状态一旦改变就不会发生逆转。状态的改变有两种情况: 从pending变为fulfilled和从pending变为rejected
如果改变已经发生了,你再对Promise对象添加回调函数,会立即得到这个结果。

通过一个ajax来了解Promise。

传统写法:
getData(method, url, successFun, failFun){
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.open(method, url);
  xmlHttp.send();
  xmlHttp.onload = function () {
    if (this.status == 200 ) {
      successFun(this.response);
    } else {
      failFun(this.statusText);
    }
  };
  xmlHttp.onerror = function () {
    failFun(this.statusText);
  };
}
利用Promise写法:
getData(method, url){
  var promise = new Promise(function(resolve, reject){
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open(method, url);
    xmlHttp.send();
    xmlHttp.onload = function () {
      if (this.status == 200 ) {
        resolve(this.response);
      } else {
        reject(this.statusText);
      }
    };
    xmlHttp.onerror = function () {
      reject(this.statusText);
    };
  })
  return promise;
}
getData('get','www.xxx.com').then(successFun, failFun)

prototype.then()

上面用到了Promise实例的.then方法。通过之前的对对象的学习,我们知道then方法是定义在原型对象Promise.prototype上的。他的作用是为 Promise 实例添加状态改变时的回调函数。通过例子我们可以看到then方法接受两个参数,第一个参数是resolved状态的回调函数,第二个参数(可选)是rejected状态的回调函数。同时,resolve和reject能往对应的方法中传参数。

var p = new Promise(function(resolve, reject){
    resolve(5)
}).then(function(value){
    console.log(value) //5
})

var p1 = new Promise(function(resolve, reject){
    reject(new Error('错误'))
}).then(function(value){
    console.log(value)
}, function(reason){
    console.log(reason) //Error: 错误(…)
})

prototype.catch()

Promise.prototype.catch方法是.then(null, rejection)的别名,用于指定发生错误时的回调函数。
也就是说下面两种代码的效果其实是一样的

new Promise(function(resolve, reject){
	reject(new Error('error'))
}).then(undefined, function(reason){
    console.log(reason) // Error: error(…)
})

new Promise(function(resolve, reject){
    reject(new Error('error'))
}).catch(function(reason){
    console.log(reason) // Error: error(…)
})

Promise.all()与Promise.race()

Promise.all与Promise.race方法都是用于将多个 Promise 实例,包装成一个新的 Promise 实例。

区别:
Promise.all只有包含的所有实例的状态都变成fulfilled,或者其中有一个变为rejected,才会调用Promise.all方法后面的回调函数。
Promise.rece只要任何一个实例率先改变状态,新的Promise的状态就跟着改变。那个率先改变的 Promise 实例的返回值,就传递给p的回调函数。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant