认识Promise

(一)、认识Promise

1.什么是Promise

• Promise是异步编程的一种解决方案。

• 当网络请求非常复杂时，就会出现回调地狱（回调里面又回调）。

(二)、Promise基本使用

1.定时器的异步事件

 我们将它换成Promise代码

new Promise((reslove,reject)=>{
    setTimeout((function(){
        resolve('hello')
        reject('error')
    },1000)
}).then(data =>{
    console.log(data);
}).catch(err => {
    console.log(err);
})

2.定时器异步事件解析

• new Promise很明显是创建一个Promise对象

• 小括号中((resolve, reject) => {})也很明显就是一个函数

  • 但是resolve, reject它们是什么呢？

  • 我们先知道一个事实：在创建Promise时，传入的这个箭头函数是固定的（一般我们都会这样写）

  • resolve和reject它们两个也是函数，通常情况下，我们会根据请求数据的成功和失败来决定调用哪一个。

• 成功还是失败？

  • 如果是成功的，那么通常我们会调用resolve(messsage)，这个时候，我们后续的then会被回调。

  • 如果是失败的，那么通常我们会调用reject(error)，这个时候，我们后续的catch会被回调。

3.Promise三种状态和另外处理形式

 

首先, 当我们开发中有异步操作时, 就可以给异步操作包装一个Promise

• 异步操作之后会有三种状态

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

• fulfill：满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then()

• reject：拒绝状态，当我们主动回调了reject时，就处于该状态，并且会回调.catch()

 

 

• Promise的另外处理形式

new Promise((resolve, reject) => {
    setTimeout(() => {
      // resolve('Hello Vuejs')
      reject('error message')
    }, 1000)
    // 不想同时写then和catch的话 then里面可以直接传入两个函数 data,err
  }).then(data => {
    console.log(data);
  }, err => {
    console.log(err);
  })

(三)、Promise链式调用

1.Promise链式调用

• 我们在看Promise的流程图时，发现无论是then还是catch都可以返回一个Promise对象。

• 

   

  这里我们直接通过Promise包装了一下新的数据，将Promise对象返回了

  Promise.resovle()：将数据包装成Promise对象，并且在内部回调resolve()函数

  Promise.reject()：将数据包装成Promise对象，并且在内部回调reject()函数

• // 简写，直接return Promise.resolve()
      new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve('aaa')
        }, 1000)
      }).then(res => {
        // 1.自己处理10行代码
        console.log(res, '第一层的10行处理代码');
   
        // 2.对结果进行第一次处理
        return Promise.resolve(res + '111')
      }).then(res => {
        console.log(res, '第二层的10行处理代码');
   
        return Promise.resolve(res + '222')
      }).then(res => {
        console.log(res, '第三层的10行处理代码');
      })

2.链式调用简写

• 简化版代码：

  • 如果我们希望数据直接包装成Promise.resolve，那么在then中可以直接返回数据

  • 注意下面的代码中，我将return Promise.resovle(data)改成了return data

 

 /* -----省略掉Promise.resolve，直接return res ----- */
    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('aaa')
      }, 1000)
    }).then(res => {
      // 1.自己处理10行代码
      console.log(res, '第一层的10行处理代码');
 
      // 2.对结果进行第一次处理
      return res + '111'
    }).then(res => {
      console.log(res, '第二层的10行处理代码');
 
      return res + '222'
    }).then(res => {
      console.log(res, '第三层的10行处理代码');
    })

失败

new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('aaa')
      }, 1000)
    }).then(res => {
      // 1.自己处理10行代码
      console.log(res, '第一层的10行处理代码');
 
      // reject失败的简写
      // return Promise.reject('error message')
      // 失败error的其他写法 手动抛出异常
      throw 'error message'
    }).then(res => {
      console.log(res, '第二层的10行处理代码');
 
      return Promise.resolve(res + '222')
    }).then(res => {
      console.log(res, '第三层的10行处理代码');
    }).catch(err => {
      console.log(err);
    })

3.Promise的all方法使用

 Promise.all([
      // new Promise((resolve, reject) => {
      //   $.ajax({
      //     url: 'url1',
      //     success: function (data) {
      //       resolve(data)
      //     }
      //   })
      // }),
      // new Promise((resolve, reject) => {
      //   $.ajax({
      //     url: 'url2',
      //     success: function (data) {
      //       resolve(data)
      //     }
      //   })
      // })
 
      new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve({
            name: 'yyy',
            age: 18
          })
        }, 2000)
      }),
      new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve({
            name: 'kobe',
            age: 19
          })
        }, 1000)
      })
    ]).then(results => {
      console.log(results);