异步处理 | snowFlakeXue

同步和异步

同步和异步是一种消息通知机制

同步: A调用B，B处理获得结果，才返回给A。A在这个过程中，一直等待B的处理结果，没有拿到结果之前，需要A（调用者）一直等待和确认调用结果是否返回，拿到结果,然后继续往下执行。

做一件事，没有拿到结果之前，就一直在这等着，一直等到有结果了,再去做下边的事

异步: A调用B，无需等待B的结果，B通过状态，通知等来通知A或回调函数来处理。

做一件事，不用等待事情的结果，然后就去忙别的了，有了结果，再通过状态来告诉我，或者通过回调函数来处理。

ES6 Promise对象

ES6的Promise对象是一个构造函数，用来生成Promise实例。
所谓Promise对象，就是代表了未来某个将要发生的事件（通常是一个异步操作）。
它的好处在于，有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数

哎呀呀呀呀呀呀，乍一看有点难懂，现在通过一个小应用，来讲解一下这个promise咋用把~

// promise的使用
// promise 下有俩个参数 分别是 resolve 和 reject 
let p = new Promise((resolve,reject)=>{
            // 请求一张图片
            let img = new Image();
            img.src = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1564676679229&di=189f903018a2854e74fbac3834f55d4e&imgtype=0&src=http%3A%2F%2Fpic.rmb.bdstatic.com%2Ff54083119edfb83c4cfe9ce2eeebc076.jpeg';

            img.onload=function(){
                resolve('成功了')//必须传参
            }

            img.onerror=function(){
                reject('失败了')//也可reject(),可以不传参
            }
        })
  // pending 等待状态
  // resolve 成功状态
  // reject  失败状态      console.log('21:',p);//[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined
        
    //then 是在promise返回结果之后才执行
    //  then里面可以传递2个函数
    //  第一个函数 成功时执行的函数
    // 第二个函数  失败时执行的函数
p.then((info)=>{
            console.log('图片'+info)
        },(msg)=>{//可以()=>{}不传参
            console.log('图片'+msg)
        })

then的返回值，会返回一个新的 Promise 对象, 但是状态会有几种情况:

then 的回调函数中没有返回值，then就会返回一个状态为: resolved 的 promise 对象
then 的回调函数返回值是非 promise 的值, then就会返回一个状态为: resolved 的 promise 对象，另外会把返回值，传递给下一个 then
then 的回调函数返回值是 promise 对象，then 就直接返回这个 promise 对象，具体的状态可以由我们自己定义,具体传递的值，也由我们自己定义

let p = new Promise((resolve,reject)=>{
          resolve('123')
      })

      p.then((info)=>{
          console.log(info)
          // return 123; //后面then会返回成功了123(对应上面的第二条，有return值时)
          return new Promise((resolve,reject)=>{
              reject();//后面then会返回失败了(对应上面的第三条)
          })
      }).then((msg)=>{
          console.log('成功了',msg)
      },()=>{
          console.log('失败了')
      })

async 函数和 await

async和await是成对存在的，这么做就是用同步解决异步问题，我想让请求三执行完了请求二执行，请求二执行完了请求一执行，有这么一个次序关系

all和race方法

// 所有的promise都成功的情况下 才会执行的函数

     let p1= new Promise((resolve,reject)=>{
         setTimeout(() => {
             resolve()
         }, 500);
     })

     let p2= new Promise((resolve,reject)=>{
         setTimeout(() => {
             reject()
         }, 300);
     })

     let p3= new Promise((resolve,reject)=>{
         setTimeout(() => {
             resolve()
         }, 2000);
     })
     // Promise.all 只有所有状态都是resolve才会成功
    let allP = Promise.all([p1,p2,p3]);

     console.log(allP)

    allP.then(()=>{
      console.log('成功了')
    },()=>{
        console.log('失败了')
    })
     // Promise.race 这一个数组中的promise 谁跑的最快 就是谁的结果！
    let raceP = Promise.race([p1,p2,p3]);

     console.log(raceP)//p2最快，所以是失败了

    raceP.then(()=>{
      console.log('成功了')
    },()=>{
        console.log('失败了')
    })