javascript

Promise对象

文章共636个字 读完大约需要2分钟

Promise

基本信息

Promise是异步编程的一种解决方案，它可以将异步操作以同步操作的形式展现出来，避免了层层嵌套的回调函数，此外，promise对象提供了统一的接口，使得控制异步操作更加容易

Promise有三种状态，pendding,fulfilled和rejected。无论从pendding到fulfilled；还是从pendding到rejected，只要状态改变了，就回凝固，之后再调用回调函数只能获得其结果。

Promise创建之后就会立即执行，无法中途取消；如果不设置回调函数，其内部抛出的错误外部接收不到；当promise处于pendding状态时，无法确认其当前处于哪个阶段。

基本用法

Promise对象接受两个参数，resolve将其从pendding状态变成resolve（成功状态）,并将其结果作为参数传递出去。reject将其从pendding状态变成reject（失败状态），并将其错误以参数传递出去。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 基本定义
const promise = new Promise((resolve, reject)=> {
  // success
  if(){
    resolve(value);
  }else {
    reject(error);
  }
});
// .then方法
promise.then(function(value){
  // success...
},function(error){
  // error...
});

Promise实例创建完成后，可以用.then方法分别指定resolve和reject状态的回调函数。所以，.then方法接收两个回调函数为参数，一个为Promise状态更改为resolve的时候调用，一个是Promise状态更改为reject的时候调用。

两个实例

异步加载图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function loadImageAsync(url) {
  return new Promise(function(resolve, reject) {
    const image = new Image();

    image.onload = function() {
      resolve(image);
    };

    image.onerror = function() {
      reject(new Error('Could not load image at ' + url));
    };

    image.src = url;
  });
}

Ajax

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

const getJSON = function(url) {
  const promise = new Promise(function(resolve, reject){
    const handler = function() {
      if (this.readyState !== 4) {
        return;
      }
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    };
    const client = new XMLHttpRequest();
    client.open("GET", url);
    client.onreadystatechange = handler;
    client.responseType = "json";
    client.setRequestHeader("Accept", "application/json");
    client.send();

  });

  return promise;
};

getJSON("/posts.json").then(function(json) {
  console.log('Contents: ' + json);
}, function(error) {
  console.error('出错了', error);
});

Promise原型上的方法

  • Promise.prototype.then(): 当Promise实例的状态发生改变时为其添加回调函数，.then方法返回另一个新的promise实例，所以可以采用链式写法。
  • Promise.prototype.catch()： 当Promise实例失败时候调用
  • Promise.prototype.finally(): 不管Promise状态如何，都会调用该函数,不接受任何参数。
1
2
3
4
5
6
7
Promise.prototype.finally = function (callback) {
  let P = this.constructor;
  return this.then(
    value  => P.resolve(callback()).then(() => value),
    reason => P.resolve(callback()).then(() => { throw reason })
  );
};
  • Promise.prototype.all()： 方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。

推荐文章

-->