promise及其应用

        首先，Promise的实现方式是比较简单的。Promise是一个对象，它有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。Promise对象一旦状态从pending变为fulfilled或rejected，便永远无法改变。我们可以使用.then方法来处理Promise对象的状态变化。如果是fulfilled状态，则执行then方法中的第一个回调函数；如果是rejected状态，则执行then方法中的第二个回调函数。

Promise 对象的核心部件是它的then 方法, 它的作用是为Promise 实例添加状态改变时的回调函数. then方法接受两个回调函数作为参数. 第一个回调函数是Promise 对象的状态变为Resolved 时调用, 第二 个回调函数是Promise 对象的状态变为Rejected 时调用. 其中,第二个函数是可选的, 不一定要提供. 这两个 函数都接受Promise 对象传出的值作为参数.Promise 对象另一个核心方法是它的catch 方法,用于指定发生 错误时的回调函数, 是then(null,rejection)的别名. catch 方法可以捕捉promise 实例中的异常还能捕获在 它之前太狠方法中发生的异常, 所以在实际的使用中, 多用catch 方法来取代then(null,rejection)处理异常.

1. promise作用：

 promise:解决异步回调的问题

一个简单粗暴的例子

console.log("a");
setTimeout(() => console.log("b"));
let p = new Promise((resolve, reject) => {
  resolve();
  console.log("c");
}).then(() => {
  console.log("d");
});
console.log("e");

 输出顺序为acedb

先执行主线程，输出a，然后执行计数器函数setTimeout，不管后面的计数器内容，然后执行Promise函数，当状态从pending改变成fulfilled或者rejected后，就是状态改变后才有接下来的then函数，将then加入微任务队列，然后执行主线程任务，输出e，4然后主任务执行完之后，首先执行微任务队列里的任务，执行完之后，再返回主线程任务队列执行setTimeout函数，输出b

2. promise对象的then方法 和catch方法

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

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

• then 方法可以接受两个回调函数作为参数。

• 第一个回调函数是 Promise 对象的状态变为 fulfilled 时调用，

• 第二个回调函数是 Promise 对象的状态变为 rejected 时调用。

• 其中，第二个函数是可选的，不一定要提供。

• 这两个函数都接受 Promise 对象传出的值作为参数。

• Promise对象的then方法有两个参数，一个是成功后的参数，另一个是失败的参数方法

   let a = 1;
      let promise = new Promise(function (resolve, reject) {
          if (a == 10) {
              resolve('成功')
          } else {
              reject("失败")
          }
       })
      //   promise.then(success,fail)
      promise.then(res => {
          console.log("成功调用", res);
      }, err => {
          console.log("失败调用", err);
      })

• new Promise().catch() ————> 错误捕获

      promise.then(res => {
          console.log(res); // resolve
      }).catch(err => {
          console.log(err); // 等同于接受 上面的reject返回的失败
      })

• Promise.race():与Promise.all() 的不同之处在于,它将与第一个传递的promise相同的完成方式被完成。他可以是resolves，也可以使rejects，这要取决于第一个完成的方式是两个中的哪个。 

•     // 如果传的跌代是空的，则返回的 promise将永远等待。
      // 如果迭代包含一个或多个非承诺值和/或已解决/拒绝的承诺，则Promise.race将解析成为迭代中找到的第一个值。
      let p1 = Promise.reject('aaa')
      let p2 = Promise.reject('bbb')
      let p3 = Promise.reject('ccc')
      Promise.race([p1, p2, p3]).then(res => {
          console.log(res);
      }).catch(err => {
          console.log(err); //输出aaa
      })

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

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

上面代码中，Promise .all()方法接受一个数组作为参数，p1、p2、p3 都是 Promise 实例，如果不是，就会先调用 Promise .resolve方法，将参数转为 Promise 实例，再进一步处理。另外，Promise .all()方法的参数可以不是数组，但必须具有 Iterator 接口，且返回的每个成员都是 Promise 实例。

3.Promise在实际环境下的应用

这是一个vue的电商项目-商品详情页

我写了个方法调库存接口。

通常情况，异步请求完毕，直接处理结果。但现在我需要在不同的地方调用，对结果进行不同的处理。所以我在getStock方法里返回一个promise,也就是把getStock方法里axios.get异步请求的结果直接返回。

getStock(region_id, product_id) {
  return new Promise((resolve, reject) => {
    axios.get('/index.php/storage-stock.html', {
      params: {
        area_id: region_id,
        product_id: [product_id]
      }
    }).then(function (res) {
      resolve(res)
    }).catch(function (error) {
      reject(error)
    })
  })
}

这里请注意关键点，.then() 里面的 resolve(res)

4.async/await的使用

• async/await是写异步代码的新方式，以前的方法有回调函数和Promise。
• async/await是基于Promise实现的，它不能用于普通的回调函数。
• async/await与Promise一样，是非阻塞的。
• async/await使得异步代码看起来像同步代码。

  async 是一个修饰符，async 定义的函数会默认的返回一个Promise对象resolve的值，因此对async函数可以直接进行then操作,返回的值即为then方法的传入函数

• // 0. async基础用法测试
  
  async function fun0() {
      console.log(1)
      return 1
  }
  
  fun0().then( x => { console.log(x) })  //  输出结果 1， 1，
  
  
  async function funa() {
      console.log('a')
      return 'a'
  }
  
  funa().then( x => { console.log(x) })  //  输出结果a， a，
  
  
  async function funo() {
      console.log({})
      return {}
  }
  
  funo().then( x => { console.log(x) })   // 输出结果 {}  {}
  
  async function funp() {
      console.log('Promise')
      return new Promise(function(resolve, reject){
          resolve('Promise')
      })
  }
  
  funp().then( x => { console.log(x) })   // 输出promise  promise

  await 也是一个修饰符，

• await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
  // 如果await 后面并不是一个Promise的返回值，则会按照同步程序返回值处理

• //  await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
  // 如果await 后面并不是一个Promise的返回值，则会按照同步程序返回值处理,为undefined
  const bbb = function(){ return 'string'}
  
  async function funAsy() {
     const a = await 1
     const b = await new Promise((resolve, reject)=>{
          setTimeout(function(){
             resolve('time')
          }, 3000)
     })
     const c = await bbb()
     console.log(a, b, c)
  }
  
  funAsy()  //  运行结果是 3秒钟之后 ，输出 1， time , string,

  async 函数返回的是一个 Promise 对象。async 函数（包含函数语句、函数表达式）会返回一个 Promise 对象，如果在函数中 return 一个直接量，async 会把这个直接量通过 Promise.resolve() 封装成 Promise 对象。await 等待的是一个表达式，这个表达式的计算结果是 Promise 对象。等着 Promise 对象 resolve，然后得到 resolve 的值，作为 await 表达式的运算结果。