promise异步操作

1.概述

我们都知道promise是用来执行异步操作的。但是为什么要使用它来执行，以及如何使用，可能许多小伙伴都是懵懵懂懂的状态！！！
（1）在JavaScript的世界中，所有代码都是单线程执行的，由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。异步执行可以用回调函数实现：
（2）我们经常会遇到这样的需求：举例（oa）项目中：
oa登录接口---获取到code-----code作为权限参数又访问权限接口----获取到权限
正常的前端会把接口写在另一个接口的回调里。是这样不错，但是它增加了函数的嵌套深度也会造成一定的逻辑混乱。并且，如果需要的是另外好几个接口的返回数据呢？

2.什么是promise？

它是一个对象，是 JavaScript 的异步操作解决方案，为异步操作提供统一接口。充当异步操作与回调函数之间的中介，使得异步操作具备同步操作的接口。Promise 可以让异步操作写起来，就像在写同步操作的流程，而不必一层层地嵌套回调函数。

2.1基本语法

Promise的构造函数接收一个参数，是函数，并且传入两个参数：resolve，reject，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。

new Promise((resolve,reject) => {
    //.....
});

  function newPromise () {
    var p = new Promise(function(resolve, reject) {
      setTimeout(() => {
        resolve('resolve1')
      }, 2000)
    })
    return p
  }
  newPromise().then((data) => {
    console.log(data)
  })

会在2秒后输出“resolve1”,原来then里面的函数就跟我们平时的回调函数一个意思，能够在这个异步任务执行完成之后被执行

2.2链式操作

在上面的代码中，若resolve函数里面又有一个回调，该怎么办呢？Promise的优势在于，可以在then方法中继续写Promise对象并返回，然后继续调用then来进行回调操作。

function newPromise1 () {
   var p = new Promise(function(resolve, reject) {
     setTimeout(() => {
       resolve('resolve1')
     }, 2000)
   })
   return p
 }
 function newPromise2 () {
   var p = new Promise(function(resolve, reject) {
     setTimeout(() => {
       resolve('resolve2')
     }, 2000)
   })
   return p
 }
 function newPromise3 () {
   var p = new Promise(function(resolve, reject) {
     setTimeout(() => {
       resolve('resolve3')
     }, 2000)
   })
   return p
 }
 newPromise1().then((data) => {
   console.log(data)
   return newPromise2()
 }).then((data) => {
   console.log(data)
   return newPromise3()
 }).then((data) => {
   console.log(data)
 })
 // resolve1
 // resolve2
 // resolve1

2.3catch后续链式操作

在一个失败操作（即一个 catch）之后可以继续使用链式操作，即使链式中的一个动作失败之后还能有助于新的动作继续完成。

  newPromise1().then((data) => {
    console.log(data)
    return newPromise2()
  }).then((data) => {
    throw new Error('Something failed')
    console.log('Do this')
    return newPromise3()
  }).catch(() => {
    console.log('Do what')
  }).then((data) => {
    console.log(data)
  })
// resolve1
// Do what
// undefined

2.4组合

Promise.all() 和 Promise.race()是并行运行异步操作的两个组合式工具。
此实例在 iterable 参数内所有的 promise 都“完成（resolved）”或参数中不包含 promise 时回调完成（resolve）；如果参数中 promise 有一个失败（rejected），此实例回调失败（reject），失败原因的是第一个失败 promise 的结果。

var p1 = Promise.resolve(3);
var p2 = 1337;
var p3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
}); 

Promise.all([p1, p2, p3]).then(values => { 
  console.log(values); // [3, 1337, "foo"] 
});

参数：array\string
返回值：promise

race 函数返回一个 Promise，它将与第一个传递的 promise 相同的完成方式被完成。它可以是完成（ resolves），也可以是失败（rejects），这要取决于第一个完成的方式是两个中的哪个。

var p1 = new Promise(function(resolve, reject) { 
    setTimeout(resolve, 500, "one"); 
});
var p2 = new Promise(function(resolve, reject) { 
    setTimeout(resolve, 100, "two"); 
});

Promise.race([p1, p2]).then(function(value) {
  console.log(value); // "two"
  // 两个都完成，但 p2 更快
});