异步编程解决方案——Promise对象(ES6语法)

  • 回调函数
  • 事件监听
  • 事件发布/订阅模式
  • Promise
  • 生成器Generators/ yield
  • async/await

JS 异步编程进化史:callback -> promise -> generator -> async/await

Promise对象

Promise是什么

promise 即承诺,异步编程的一种解决方式,内部保存异步操作,通过它可以获得异步操作的消息

特点

  • 对象的状态不受外部影响。总共三种状态,进行中 pending 、已成功 fulfilled 、已失败 rejected 。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。
  • 一旦状态改变,就不会再变,任何时候都可以得到这个结果。状态改变只有两种可能:从 pending 变为 fulfilled 和从 pending 变为 rejected 。状态凝固后,被称为 resolved 已定型。

优点:接口统一,使得控制异步操作方便;解决回调地狱,将异步操作以同步操作的流程表现出来

缺点:中途无法取消,一旦新建就立即执行;内部报错无法反应到外部(无回调函数的话); pending 状态是无法知道具体执行到哪一步

new Promise(请求1)
    .then(请求2(请求结果1))
    .then(请求3(请求结果2))
    .then(请求4(请求结果3))
    .then(请求5(请求结果4))
    .catch(处理异常(异常信息))
复制代码

基本用法

第一步,创建 Promise 实例

const promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

resolve()将pending状态变为resolved状态,同时传出参数(一般是异步操作返回的结果)
reject()将pending状态变为rejected状态,同时传出参数(一般是错误信息)
复制代码

第二步,指定回调函数

promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

then方法可以接受两个回调函数作为参数。
第一个回调函数是Promise对象的状态变为resolved时调用,
第二个回调函数是Promise对象的状态变为rejected时调用。
复制代码

Promise 新建后立即执行

Promise内部创建的代码立即执行,回调函数放入任务队列中,调用栈中的任务(即同步任务)都执行完才执行任务队列中的任务。

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

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

console.log('Hi!');

输出如下:
// Promise
// Hi!
// resolved
复制代码

一般 Promise 都以函数返回的形式来创建,好处是封装后在不同场合下可以多次使用

用Promise对象实现的 Ajax 操作

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);
});
复制代码

resolve()reject() 参数是另一个 Promise 实例时,原 Promise 状态失效,由新 Promise 的状态决定原 Promise 的回调函数执行

const p1 = new Promise(function (resolve, reject) {
  setTimeout(() => reject(new Error('fail')), 3000)
})

const p2 = new Promise(function (resolve, reject) {
  setTimeout(() => resolve(p1), 1000)
})

p2
  .then(result => console.log(result))
  .catch(error => console.log(error))
// Error: fail

分析如下:
p1三秒后进入rejected状态,p2一秒后进入resolved状态
由于p2的参数为p1,则一秒后,p2状态失效,由p1决定p2的状态
此时p1仍处于pending状态
两秒后,p1状态变为rejected,则p2状态也变为rejected
触发回调函数.catch(),打印出p1的reject()中的参数
复制代码

调用resolve或reject并不会终结 Promise 的参数函数的执行

new Promise((resolve, reject) => {
  resolve(1);
  console.log(2);
}).then(r => {
  console.log(r);
});
// 2
// 1
复制代码

在前面加个return就会终结了

new Promise((resolve, reject) => {
  return resolve(1);
  // 后面的语句不会执行
  console.log(2);
})
复制代码

Promise.prototype

Promise.prototype.then()

参数

第一个参数是resolved状态的回调函数,第二个参数(可选)是rejected状态的回调函数。

返回值

then方法返回的是一个新的Promise实例(注意,不是原来那个Promise实例)。

因此可以采用链式写法,即then方法后面再调用另一个then方法。

链式操作

第一个回调函数完成以后,会将返回结果作为参数,传入第二个回调函数。

getJSON("/posts.json").then(function(json) {
  return json.post;
}).then(function(post) {
  // ...
});
复制代码

前一个回调函数,返回的是一个Promise对象(即有异步操作),后一个回调函数,就会等待该Promise对象的状态发生变化,才会被调用。

getJSON("/post/1.json").then(
  post => getJSON(post.commentURL)
).then(
  comments => console.log("resolved: ", comments),
  err => console.log("rejected: ", err)
);
复制代码

Promise.prototype.catch()

Promise.prototype.catch 等价于 .then(null, rejection).then(undefined, rejection)

建议用 .catch() 而不用 .then() 的第二个参数来捕获错误

因为 .catch() 不仅可以处理 Promise 对象状态变成 rejected ,还能捕获 .then() 方法中的错误

getJSON('/posts.json').then(function(posts) {
  // ...
}).catch(function(error) {
  // 处理 getJSON 和 前一个回调函数运行时发生的错误
  console.log('发生错误!', error);
});
复制代码

如果 Promise 状态已经变成resolved,再抛出错误是无效的

Promise 对象的错误具有“冒泡”性质,会一直向后传递,直到被捕获为止

getJSON('/post/1.json').then(function(post) {
  return getJSON(post.commentURL);
}).then(function(comments) {
  // some code
}).catch(function(error) {
  // 处理前面三个Promise产生的错误
});
复制代码

Promise 会吃掉错误

Promise 的定义如果有语法错误,控制台会显示,但是代码不会停止运行,会继续执行,即 Promise 内部的错误不会影响到 Promise 外部的代码

const someAsyncThing = function() {
  return new Promise(function(resolve, reject) {
    // 下面一行会报错,因为x没有声明
    resolve(x + 2);
  });
};

someAsyncThing().then(function() {
  console.log('everything is great');
});

setTimeout(() => { console.log(123) }, 2000);
// Uncaught (in promise) ReferenceError: x is not defined
// 123
复制代码

返回值也是一个 Promise 对象,可以链式操作

const someAsyncThing = function() {
  return new Promise(function(resolve, reject) {
    // 下面一行会报错,因为x没有声明
    resolve(x + 2);
  });
};

someAsyncThing()
.catch(function(error) {
  console.log('oh no', error);
})
.then(function() {
  console.log('carry on');
});
// oh no [ReferenceError: x is not defined]
// carry on

如果没有报错,则会跳过catch方法
复制代码

Promise.prototype.finally()

finally 方法用于指定不管 Promise 对象最后状态如何, 都会执行 的操作。

在执行完then或catch指定的回调函数以后,也还会执行finally方法指定的回调函数。

promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});
复制代码

回调函数不接受任何参数

无法判断状态,就是为了少写相同的代码(then和catch中都要写的)

实现

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 })
  );
};
复制代码

返回值总是原来的值

// resolve 的值是 undefined
Promise.resolve(2).then(() => {}, () => {})
// resolve 的值是 2
Promise.resolve(2).finally(() => {})

// reject 的值是 undefined
Promise.reject(3).then(() => {}, () => {})
// reject 的值是 3
Promise.reject(3).finally(() => {})
复制代码

Promise方法

Promise.all()

作用:将多个 Promise 实例,包装成一个新的 Promise 实例

语法: const p = Promise.all([p1, p2, p3]);

参数:输入一个数组,数组元素若不是Promise 实例,则会被 Promise.resolve 转成实例

返回值:返回一个新的Promise 实例,p的状态由p1、p2、p3决定

  • 只有p1、p2、p3的状态都变成fulfilled,p的状态才会变成fulfilled,此时p1、p2、p3的返回值组成一个数组,传递给p的回调函数。
  • 只要p1、p2、p3之中有一个被rejected,p的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数。
  • 如果作为参数的 Promise 实例,自己定义了catch方法,那么它一旦被rejected,并不会触发Promise.all()的catch方法。

总结:逻辑与,全 fulfilledfulfilled ,一 rejectedrejected

const p1 = new Promise((resolve, reject) => {
  resolve('hello');
})
.then(result => result)
.catch(e => e);

const p2 = new Promise((resolve, reject) => {
  throw new Error('报错了');
})
.then(result => result)
.catch(e => e);

Promise.all([p1, p2])
.then(result => console.log(result))
.catch(e => console.log(e));
// ["hello", Error: 报错了]
复制代码

Promise.race()

const p = Promise.race([p1, p2, p3]);

上面代码中,只要p1、p2、p3之中有一个实例率先改变状态,p的状态就跟着改变。

那个率先改变的 Promise 实例的返回值,就传递给p的回调函数。

总结:竞赛,谁先返回就返回该值

// 如果指定时间内没有获得结果,就将 Promise 的状态变为reject,否则变为resolve。
const p = Promise.race([
  fetch('/resource-that-may-take-a-while'),
  new Promise(function (resolve, reject) {
    setTimeout(() => reject(new Error('request timeout')), 5000)
  })
]);

p
.then(console.log)
.catch(console.error);
复制代码

Promise.allSettled()

只有等到所有这些参数实例都返回结果,不管是fulfilled还是rejected,包装实例才会结束。

返回的新的 Promise 实例,一旦结束,状态总是fulfilled

总结:都被设置,能解决 Promise.all() 的无法知道所有操作都结束

const resolved = Promise.resolve(42);
const rejected = Promise.reject(-1);

const allSettledPromise = Promise.allSettled([resolved, rejected]);

allSettledPromise.then(function (results) {
  console.log(results);
});
// [
//    { status: 'fulfilled', value: 42 },
//    { status: 'rejected', reason: -1 }
// ]
复制代码

监听函数接收到的参数是数组results。

该数组的每个成员都是一个对象,对应传入Promise.allSettled()的两个 Promise 实例。

每个对象都有status属性,该属性的值只可能是字符串fulfilled或字符串rejected。

fulfilled时,对象有value属性,rejected时有reason属性,对应两种状态的返回值。

Promise.any()

Promise.any()方法接受一组 Promise 实例作为参数,包装成一个新的 Promise 实例。

只要参数实例有一个变成fulfilled状态,包装实例就会变成fulfilled状态;如果所有参数实例都变成rejected状态,包装实例就会变成rejected状态。

总结:逻辑或,一 fulfilledfulfilled ,全 rejectedrejected

var resolved = Promise.resolve(42);
var rejected = Promise.reject(-1);
var alsoRejected = Promise.reject(Infinity);

Promise.any([resolved, rejected, alsoRejected]).then(function (result) {
  console.log(result); // 42
});

Promise.any([rejected, alsoRejected]).catch(function (results) {
  console.log(results); // [-1, Infinity]
});
复制代码

Promise.resolve()

作用:将现有对象转为 Promise 对象

语法:

Promise.resolve('foo')
// 等价于
new Promise(resolve => resolve('foo'))
复制代码

参数:

(1)参数是一个 Promise 实例

Promise.resolve将不做任何修改、原封不动地返回这个实例。

(2)参数是一个thenable对象

Promise.resolve方法会将这个对象转为 Promise 对象,然后就立即执行thenable对象的then方法。

let thenable = {
  then: function(resolve, reject) {
    resolve(42);
  }
};

let p1 = Promise.resolve(thenable);
p1.then(function(value) {
  console.log(value);  // 42
});
复制代码

(3)参数不是具有then方法的对象,或根本就不是对象

Promise.resolve方法返回一个新的 Promise 对象,状态为resolved,回调函数的参数就是该参数。

const p = Promise.resolve('Hello');

p.then(function (s){
  console.log(s)
});
// Hello
复制代码

(4)不带有任何参数

直接返回一个resolved状态的 Promise 对象。就是要注意回调执行的顺序。

setTimeout(function () {
  console.log('three');
}, 0);

Promise.resolve().then(function () {
  console.log('two');
});

console.log('one');

// one
// two
// three
复制代码

Promise.reject()

返回一个新的 Promise 实例,该实例的状态为rejected。

Promise.reject()方法的参数,会原封不动地作为reject的理由,变成后续方法的参数。

const p = Promise.reject('出错了');
// 等同于
const p = new Promise((resolve, reject) => reject('出错了'))

p.then(null, function (s) {
  console.log(s)
});
// 出错了
复制代码

Promise.try()

让同步函数同步执行,异步函数异步执行,并且让它们具有统一的 API

以下的函数 f() 表示的是不确定是同步或者异步的操作

// 方法一:
const f = () => console.log('now');
(
  () => new Promise(
    resolve => resolve(f())
  )
)();
console.log('next');
// now
// next
复制代码
// 方法二:
(async () => f())()
.then(...)
.catch(...)
复制代码
// 方法三:
Promise.try(() => f())
  .then(...)
  .catch(...)
复制代码
我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章