JavaScript-Promise介绍-三种状态-all方法

Promise介绍

• Promise是ES6引入的一个语法
• Promise是异步编程的一种解决方案

什么时候处理异步事件？

• 网络请求
• 我们封装一个网络请求的函数，因为不能立刻拿到结果
• 所以我们会传入另外一个函数，在数据请求成功时，将数据通过传入的而函数回调出去
• 如果只是一个简单地网络请求，那么这种方案不会给我们带来很大的麻烦
• 但是当网络请求太复杂时，就会出现回调地狱

回调地狱

• 我们通过一个url1从服务器加载一个数据data1，data1中包含了下一个请求url2
• 我们需要通过data1取出url2，从服务器加载数据data2，data2中包含了下一个请求url3
• 我们需要通过data2取出url3，从服务器加载数据data3，data3中包含了下一个请求url4
• 发送网络请求url4，获取最终的数据data4

上面代码有什么问题吗?

• 正常情况下没啥问题，正常运行
• 但是不容易维护
• 我们期望一种更加优雅的方式来进行这种异步操作

如何做呢？

• Promise可以以一种非常优雅的方式来解决这个问题

Promise基本使用

回调地狱 - - ！

  //Promise参数是一个函数
  //resolve,reject本身又是函数
  new Promise((resolve,reject)=>{
    //异步操作
    setTimeout(()=>{
      console.log('hello world');
      setTimeout(()=>{
        console.log('hello promise');
        setTimeout(()=>{
          console.log('hello vue');
        },1000)
      },1000)
    },1000)
  })

解决方法： 链式编程

  //Promise参数是一个函数
  //resolve,reject本身又是函数
  new Promise((resolve,reject)=>{
    //异步操作,第一次网络请求
    setTimeout(()=>{
      //第一次请求结果
      console.log('hello world');
      //再次请求
      resolve()
    },1000)
  }).then(()=>{
    //第二次网络请求
    setTimeout(()=>{
      //第二次请求结果
      console.log('hello vue');
      return new Promise((resolve,reject)=>{
        //返回后再次请求
        resolve()
      })
    },1000)
  }).then(()=>{
    //第三次网络请求
    setTimeout(()=>{
      //第三次请求结果
      console.log('hello java');
    },1000)
  })

当执行new Promise() 是，会执行构造函数，保存一些状态信息，执行传入的函数
在执行传入的回调函数是，会传入两个参数，resolve，reject，本身又是函数

  new Promise((resolve,reject)=>{
    setTimeout(()=>{
      //get data
      resolve(data)
      //失败的时候调用reject
      reject('error message')
    },1000)
  }).then((data)=>{
    //data处理代码
  }).catch((err)=>{
    //error处理代码
  })

Promise三种状态

synchronization: 同步
asynchronization: 异步

• padding: 等待状态，比如正在网络请求，定时事件未到
• fulfill: 满足状态，请求到了，当我们主动回调了resolve时，就处于该状态，并且会回调then()
• reject: 拒绝状态，当我们主动回调reject时，就出于该状态，并且会回调cath()

  new Promise((resolve,reject)=>{
    setTimeout(()=>{
      //resolve('hello,vuejs')
      reject('err message')
    },1000)
  }).then(
    (data) =>{
      console.log(data);
    },
    (err) => {
      console.log(err);
    }
  )

Promise链式调用

    //wrapped into
    //网络请求: aaa -> 自己处理
    //处理： aaa111 ->  自己处理
    //处理： aaa111222 -> 自己处理
    new Promise((resolve,reject)=>{
        //请求aaa
        setTimeout(()=>{
            //请求aaa处理aaa
            resolve('aaa')
        },1000)
    }).then((res)=>{
        console.log(res,'第一层的10行处理代码');
        //继续请求
        return new Promise(((resolve)=>{
            resolve(res + '111')
        }))
    }).then(res=>{
        console.log(res,'第二层的10行处理代码');
        return new Promise((resolve)=>{
            resolve(res+'222')
        })
    }).then(res=>{
        console.log(res,'第三层的10行处理代码');
    })

下面可以简写

      return new Promise((resolve)=>{
            resolve(res+'222')
        })

  new Promise((resolve,reject)=>{
      setTimeout(()=>{
          resolve('aaa')
      },1000)
  }).then(res=>{
      console.log(res);
      console.log('第一层的10行处理代码');
      return Promise.resolve(res+'111');
  }).then(res=>{
      console.log(res);
      console.log('第二层的10行处理代码');
      return Promise.resolve(res+'222')
  }).then(res=>{
      console.log(res);
      console.log('第三层的10行处理代码');
  })

还可以再简化

当然reject也有简写

throw ‘发生错误了’
也可以catch出来

Promise的all方法

需求：

解决方法