Promise简单了解

Promise

1. Promise简介

   —Promise是异步编程的一种解决方案，将网络请求和异步处理代码进行分离；

   —什么时候处理异步事件？

   比较常见的场景就是网络请求！我们封装一个网络请求的函数，不会立即拿到结果，往往会传入另一个函数，在数据请求成功时，将数据通过传入的函数回调出去；如果网络请求非常复杂时，会出现回调地狱；

   定时器的异步事件

   —Promise可以对异步事件进行封装；

   —Promise传入一个回调函数，回调函数中传入两个参数resolve和reject，这两个参数本身也是函数；

   —异步事件处理（链式编程）：

   （1）通过new构造函数，保存了一些状态信息，并且执行传入的回调函数；

   （2）在执行传入的回调函数时，会传入两个参数，resolve和reject，这两个参数本身又是函数；

   （3）网络请求成功调用resolve，然后再then()中进行数据处理；失败就调用reject，在catch()中捕捉错误信息；

   new Promise((resolve,reject)=>{
    //这里相当于简单的网络请求
    setTimeout(()=>{
        //网络请求成功调用resolve
        resolve('Hello World')
        //网络请求失败，就将网络错误信息传递给reject
        reject('error message')
    },1000)
    //而then()用于处理网络请求
   }).then(data=>{
    //打印的是setTimeout中的Hello World
    console.log(data)
   }).catch(err => {
    console.log(err)
   })
   

   Promise的三种状态

   —pending：等待状态，比如正在进行网络请求，或者定时器没有到时间；

   —fulfill：完成状态，当我们主动回调了resolve时，就处于该状态，并且会回调then()进行数据处理；

   —reject：拒绝状态，当我们主动回调了reject时，就处于该状态，并且回调catch()实现错误捕捉；

   —Promise的另一种处理形式，可以直接在then()中传入两个函数，分别用于处理完成状态和拒绝状态：

   new Promise((resolve,reject) => {
   setTimeout(()=>{
     resolve('Hello World')
     reject('error message')
   },1000)
   }).then(data=>{
   console.log(data)
   },err=>{
   console.log(err)
   })
   

   链式调用

   —在Promise中，无论then还是catch都可以返回一个Promise对象；

   —简写：Promise.resolve(res+'111')

   —链式调用实例：

   new Promise(resolve => {
    setTimeout(()=>{
        resolve('aaa')
    },1000)
   }).then(res=>{
    console.log(res)
    return new Promise(resolve=>{
        resolve(res+'111')
    })
    //简写
    return Promise.resolve(res+'111')
    //省略掉Promise.resolve,内部会进行Promise包装
    return res+'111'
   }).then(res=>{
    console.log(res)
    return res+'222'
   }).then(res=>{
    console.log(res)
   })
   

   —可以通过return Promise.reject('error')，也可以通过throw 'error'抛出异常；

   Promise的all方法

   —all可以同时处理多个网络请求，传入的对象为可迭代对象，比如数组；

   —例如：

   Promise.all([
    new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve('result1')
    },1000)
   }),
    new Promise((resolve,reject)=>{
        setTimeout(()=>{
          resolve('result2')  
        },2000)
    })
   ]).then(results=>{
    //两个处理结果可以一起放入数组中统一返回
    console.log(results)
   })