Pomise是什么

Promise是一个构造函数,是es6用于解决异步编程的新方式.

Promise实例的三个状态

  1. Promise构造函数默认返回的实例状态是pending
  2. Promise构造函数调用resolve之后,实例的状态态是resolved
  3. Promise构造函数调用reject之后,实例的状态是rejected

注意Promise实例对象的状态只能改变一次,

Promise怎么处理异步

Promise接收一个函数作为参数,在函数内部封装一个异步操作,更具异步操作的结果,调用相应的函数,改变实例状态

  1.  new Promise((resolve, reject) => { 
  2.        setTimeout(() => {
  4.          resolve('成功的数据 ' + time) //调用resolve改变实例状态为成功             
  6.        }, 1000);
  8.    }).then(
  9.        value => {
  10.            console.log('成功', value)
  11.        })

1.当实例的状态为成功,会通过then函数执行第一个函数,失败则第二个

Promise能做什么

传统的异步通过纯回调来解决异步,在发请求前就要准备好回调,当后一个请求依赖前一个的数据时就会产生回调地狱,不利于代码维护,和处理错误

  1. doSomething(function(result) {
  2.         // 第一个异步任务成功启动第二个异步任务
  3.         doSomethingElse(result, function(newResult) {
  4.           // 第二个异步任务成功启动第三个异步任务
  5.           doThirdThing(newResult, function(finalResult) {
  6.             // 第三个异步任务成功了
  7.             console.log('Got the final result: ' + finalResult)
  8.           }, failureCallback)
  9.         }, failureCallback)
  10.       }, failureCallback)

Promise链式调用能完美解决回调地狱,promise指定回调更灵活,可以在异步任务前或后

  1. doSomething()  
  2.         .then(function(result) {
  3.           return doSomethingElse(result)
  4.         })
  5.         .then(function(newResult) {
  6.           return doThirdThing(newResult)
  7.         })
  8.         .then(function(finalResult) {
  9.           console.log('Got the final result: ' + finalResult)
  10.         })
  11.         .catch(failureCallback)
  1.  const p = new Promise((reslove,reject)=>{
  3.     setTimeout(() => {
  5.         reslove(3)
  7.       },2000);
  9.     })
  11.     setTimeout(() => {
  13.         p.then(()=>{
  15.         })
  16.       },3000);
  18.     })

then函数返回promise的特点

then函数返回promise实例的状态更具,他执行的情况而定

  1. 如果返回的正常的值,那么then函数返回的就是成功的,
  2. 如果函数体抛出异常,那么then函数返回的就是失败的,
  1. new Promise((resolve, reject) => {
  3.     resolve('早上好');
  5.    }).then(()=>{
  7.     return  2  // 返回一个成功的promise
  9.    }).then((value)=>{
  11.     console.log(value);  //2
  13.     throw  4    //返回一个失败的promise
  14.    }).then(()=>{
  15.    },(reason)=>{
  17.     console.log(reason);   console.log(reason);  //4
  19.    })
  1. 如果返回的是promise是,那么then函数返回的promise状态跟他返回的promise状态一直
  1. new Promise((resolve, reject) => {
  3.     resolve('早上好');
  5.    }).then(()=>{
  7.     return  Promise.resolve('成功')
  9.    }).then((value)=>{
  11.     console.log(value);  //成功
  13.     return  Promise.reject('失败')
  14.    }).catch((reason)=>{
  16.       console.log(reason);
  19.     })

Promise的其他API

Promise.all方法接收一个由promise组成的数组

  1.  const p1 = new Promise((resolve, reject) => {
  2.         setTimeout(() => {
  3.             resolve(3)
  4.         }, 1000);
  5.     })
  6.  const p2 = Promise.resolve(5)
  8.   const p4 = Promise.all([p1, p2])
  9.   p4.then(  
  10.         //p4 all onResolved() (2) [3, 5]
  11.         values => console.log('p4 all onResolved()', values), // 数据的顺序与promise数组顺序一致 
  12.         reason => console.log('p4 all onRejected()', reason),
  13.   )

该方法返回的promise 由他所执行的promise的状态决定如果都成功,则执行成功的回调接受一个由成功值所组成的数组
反之如果失败 则执行失败的回调,接收的值是失败promise的值

Promise.race

Promise.race方法接收一个由promise组成的数组,第一个改变状态的promise的结果就是他最终的状态,并执行相应的回调,

  1. const p1 = new Promise((resolve, reject) => {
  2.         setTimeout(() => {
  3.             resolve(3)
  4.         }, 1000);
  5.     })
  6.     const p2 = Promise.resolve(5)
  7.     const p3 = Promise.reject(4)
  9.     const p5 = Promise.race([p1, p2, p3]) //5    不考虑异步就跟存放的位置相关,靠前先执行也就先改变状态
  10.     const p5 = Promise.race([p1, p3, p2]) //4
  11.     p5.then(
  12.         value => console.log('p5 race onResolved()', value),  
  13.         reason => console.log('p5 race onRejected()', reason),
  14.     )