promise常用使用方法

Promise

Promise 对象用于表示一个异步操作的最终完成 (或失败), 及其结果值.

语法

new Promise( function(resolve, reject) {...} /* executor */  );

executor是带有 resolve 和 reject 两个参数的函数 。

描述

Promise 对象是一个代理对象（代理一个值），被代理的值在Promise对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法（handlers）。 这让异步方法可以像同步方法那样返回值，但并不是立即返回最终执行结果，而是一个能代表未来出现的结果的promise对象。
主要有以下几种状态：
pending:初始状态，既不成功，也不是失败，
fulFilled:成功，
rejected:失败，

属性

Promise.length:length属性，其值总是为 1 (构造器参数的数目)。
Promise.prototype:表示 Promise 构造器的原型。

方法

Promise.all(iterable)

promise.all（iterate）方法返回一个Promise实例，当iterate中所有参数都完成才会回调，如果失败是返回第一个失败的原因;(iterable:一个可迭代的对象，如array，string)

var promise1 = Promise.resolve(3);
var promise2 = 42;
var promise3 = new Promise(function(resolve, reject) {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then(function(values) {
  console.log(values);
});
// [3, 42, "foo"]
说明：在任何情况下，Promise.all 返回的 promise 的完成状态的结果都是一个数组，
它包含所有的传入迭代参数对象的值（也包括非 promise 值）。

Promise.race(reason)

Promise.race(iterable):返回一个promise，一旦迭代器中的某个promise解决或则拒绝，返回的promise就会解决或者拒绝。

var promise1 = new Promise(function(resolve, reject) {
   setTimeout(resolve, 500, 'one');
});
var promise2 = new Promise(function(resolve, reject) {
   setTimeout(resolve, 100, 'two');
});
Promise.race([promise1, promise2]).then(function(value) {
 console.log(value)
});
//  "two"

Promise.reject(reason)

Promise.reject(reason)方法返回一个带有拒绝原因reason参数的Promise对象
reason:表示被拒绝的原因

Promise.reject("Testing static reject").then(function(reason) {
 // 未被调用
}, function(reason) {
 console.log(reason); // "Testing static reject"
});

Promise.reject(new Error("fail")).then(function(result) {
 // 未被调用
}, function(error) {
 console.log(error); // stacktrace
});

Promise.resolve(value)

Promise.resolve(value)方法返回一个以给定值解析后的Promise对象。如果该值为promise，返回这个promise；如果这个值是thenable（即带有"then" 方法)），返回的promise会“跟随”这个thenable的对象，采用它的最终状态；否则返回的promise将以此值完成。

var promise1 = Promise.resolve(123);
promise1.then(function(value) {
 console.log(value);//123
});

数组
var p = Promise.resolve([1,2,3]);
p.then(function(v) {
 console.log(v[0]); // 1
});

Promise 链式操作

1链式catch方法

var p1 = new Promise(function(resolve, reject) {
 resolve('Success');
})
p1.then(function(value) {
 console.log(value); // "Success!"
 throw 'oh, no!';
}).catch(function(e) {
 console.log(e); // "oh, no!"
}).then(function(){
 console.log('after a catch the chain is restored');
}, function () {
 console.log('Not fired due to the catch');
})

捕获抛出的错误
var p1 = new Promise(function(resolve, reject) {
 throw 'Uh-oh!';
});
p1.catch(function(e) {
 console.log(e); // "Uh-oh!"
});

2finally()

finally() 虽然与 .then(onFinally, onFinally) 类似，它们不同的是：
Promise.resolve(2).then(() => {}, () => {}) //结果是undefind
Promise.reject(2).then(() => {}, () => {})//结果是undefind
Promise.resolve(2).finally(() => {})//结果是2
Promise.reject(2).then(() => {}, () => {})//结果是2

链式三个一起应用
let isLoading = true;
fetch(myRequest).then(function(response) {
    var contentType = response.headers.get("content-type");
    if(contentType && contentType.includes("application/json")) {
      return response.json();
    }
    throw new TypeError("Oops, we haven't got JSON!");
  })
  .then(function(json) { /* process your JSON further */ })
  .catch(function(error) { console.log(error); })
  .finally(function() { isLoading = false; });