Promise对象

Promise的含义

1. Promise 是目前前端解决异步问题的统一方案
2. 所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理
3. 特点

• 对象的状态不受外界影响
  【1】.Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）
  【2】.只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态
• 一旦状态改变，就不会再变，任何时候都可以得到这个结果
  【1】.Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected
  【2】.只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果

4. 缺点

• 无法取消Promise
• 如果不设置回调函数，Promise内部抛出的错误，不会反应到外部
• 当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）

基本用法

Promise对象是一个构造函数

//用Promise对象实现ajax操作的实例
const promise = new Promise((resolve,reject)=>{
    const {success, fail} = options;
    const request = new XMLHttpRequest();
    request.open(method, url);
    request.onreadystatechange = () => {
        if(request.readyState === 4){
            if(request.status === 200){
            	//成功回调
                resolve.call(null, request.response);
            }else if(request.status >= 400){
            	//失败回调
                reject.call(null, request.response);
            }
        }
    }
    request.send();
})

实例生成后，可用then方法分别指定resolved状态和rejected状态的回调函数

promise.then((value)=>{
    //成功
},(error)=>{
    //失败
});

//简单举例
timeOut = (ms) => {
    return new Promise((resolve, reject)=>{
        setTimeout(resolve,ms,'done');
    });
}
timeOut(100).then(value=>{
    console.log(value);
});

Promise 新建后就会立即执行

let promis1 = new Promise((resolve, reject)=>{
    console.log('Promise');
    resolve();
});
promise1.then(()=>{
    console.log("resolved.");
});
console.log("hello!");
// Promise
// Hello!
// resolved.

//异步加载图片
loadImgAsync = (url)=>{
    return new Promise((resolve, reject)=>{
        const img = new Image();
        img.onload = ()=>{
            resolve(img);
        }
        img.onerror = ()=>{
            reject(new Error(new Error('Could not load image at ' + url));
        }
        img.src = url;
    });
}

Promise.prototype.then()

Promise 实例具有then方法，也就是说，then方法是定义在原型对象Promise.prototype上的

getJSON("/posts.json").then(function(json) {
  return json.post;
}).then(function(post) {
  // ...
});

Promise.prototype.catch()

Promise.prototype.catch()方法是.then(null, rejection)或.then(undefined, rejection)的别名，用于指定发生错误时的回调函数

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

Promise.prototype.finally()

finally()方法用于指定不管 Promise 对象最后状态如何，都会执行的操作。该方法是 ES2018 引入标准的。

promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});

Promise.all()

Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例

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

Promise.race()

Promise.race()方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例

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

Promise.allSettled()

Promise.allSettled()方法接受一组 Promise 实例作为参数，包装成一个新的 Promise 实例。只有等到所有这些参数实例都返回结果，不管是fulfilled还是rejected，包装实例才会结束。该方法由 ES2020 引入

const promises = [
  fetch('/api-1'),
  fetch('/api-2'),
  fetch('/api-3'),
];

await Promise.allSettled(promises);
removeLoadingIndicator();

Promise.any()

1. ES2021 引入了Promise.any()方法。该方法接受一组 Promise 实例作为参数，包装成一个新的 Promise 实例返回。只要参数实例有一个变成fulfilled状态，包装实例就会变成fulfilled状态；如果所有参数实例都变成rejected状态，包装实例就会变成rejected状态。
2. Promise.any()跟Promise.race()方法很像，只有一点不同，就是不会因为某个 Promise 变成rejected状态而结束。

const promises = [
  fetch('/endpoint-a').then(() => 'a'),
  fetch('/endpoint-b').then(() => 'b'),
  fetch('/endpoint-c').then(() => 'c'),
];
try {
  const first = await Promise.any(promises);
  console.log(first);
} catch (error) {
  console.log(error);
}

Promise.resolve()

有时需要将现有对象转为 Promise 对象，Promise.resolve()方法就起到这个作用

const testPromise = Promise.resolve($.ajax('/whatever.json'));

Promise.reject()

Promise.reject(reason)方法也会返回一个新的 Promise 实例，该实例的状态为rejected。

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

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

Promise.try()

实际开发中，经常遇到一种情况：不知道或者不想区分，函数f是同步函数还是异步操作，但是想用 Promise 来处理它。因为这样就可以不管f是否包含异步操作，都用then方法指定下一步流程，用catch方法处理f抛出的错误。一般就会采用下面的写法。

Promise.try(() => database.users.get({id: userId}))
  .then(...)
  .catch(...)