ES6笔记之Promise的学习

最新推荐文章于 2024-04-20 09:30:00 发布

原创最新推荐文章于 2024-04-20 09:30:00 发布 · 193 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Promise #then #resolve #reject #异步处理的结果

ES6 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了Promise的概念及使用方式，包括其三种状态（pending、fulfilled、rejected）的特点，并讲解了then和catch方法的具体应用，通过实例展示了如何利用Promise进行异步编程。

一、什么是Promise

Promise作为异步编程的一种解决方案，里面保存一个异步操作的结果（resolve/reject），根据该异步操作的结果，进行后面的操作（then/catch）。

特点1：对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败），仅有异步操作的结果可以（resolve/reject）可以改变该状态。
特点2：一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。

二、Promise的方法

then方法，Promise.prototype.then可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数（可选）是Promise对象的状态变为rejected时调用。这两个函数都接受Promise对象传出的值作为参数。

注：Promise对象通过resolve(x)或reject(x)传出x值，catch方法是then(null, rejection)的别名，用于指定发生错误时的回调函数。

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;
  });
}

loadImageAsync().then((x)=>console.log(x), (y)=>console.log(y));

//等同于

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;
  });
}

loadImageAsync().then((x)=>console.log(x)).catch((y)=>console.log(y));

上文为图片加载函数，异步操作的结果为resolve则调用第一个函数(x)=>console.log(x)，reject则调用第二个函数(y)=>console.log(y)

then方法返回一个Promise对象，当then方法的回调函数也返回一个Promise对象A时，该对象A的异步状态结果将控制后续的链式操作

new Promise(function(resolve, reject) {
    resolve('original Promise')}
).then((x)=>{console.log(x); return Promise.reject('new Promise')})
 .catch((x)=>console.log(x))

catch方法，Promise.prototype.catch方法会抓获未处理的reject或未处理的throw(error)。

//catch抓获未处理的reject异步处理结果
var p = new Promise(function(resolve, reject) {
    reject('reject');
});

p.then((x)=>console.log(x))
 .catch((y)=>console.log(y)); //reject

//catch抓获未处理的error;

var p = new Promise(function(resolve, reject) {
  throw new Error('error');
});
p.then((x)=>console.log(x))
 .catch((y)=>console.log(y)); //error
// ok

若该reject/throw已经被处理。则catch不会抓获，下文第二个catch不会输出内容（因为被第一个catch处理了）

var p = new Promise(function(resolve, reject) {
    reject('reject');
});

p.then((x)=>console.log(x))
 .catch((y)=>console.log(y)) //reject
 .catch(()=>console.log('second catch')); //不捕捉错误

若resolve、reject已经发生，则后续的reject或throw不会被抓获。

var p = new Promise(function(resolve, reject) {
    resolve('resolve')
    reject('reject');
});

p.then((x)=>console.log(x)) //resolve
 .catch((y)=>console.log(y));