初识Promise

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

定时器的异步事件

这里，我们用一个定时器来模拟异步事件：
假设下面的data是从网络上1秒后请求的数据
console.log就是我们的处理方式

setTimeout(function(){
let data = 'Hello World'
console.log(data);
},1000)

将其换为Promise代码：

new Promise((resolve,reject) =>{
setTimeout(function(){
//成功的时候调用resolve
resolve('Hello World')
//失败的时候调用reject
reject('Error Data')
},1000)
}).then(data =>{
console.log(data);
}).catch(error =>{
console.log(error);
})

那么，当我们开发中有异步操作时，就可以给异步操作包装一个Promise

Promise三种状态

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

• pending:等待状态，比如正在进行网络请求，或者定时器没有到时间
• fulfill:满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then()
• reject:拒绝状态，当我们主动回调了reject时，就处于该状态，并且会回调.catch()

Promise链式调用

其实无论是then还是catch都可以返回一个Promise对象
所以，我们的代码其实是可以进行链式调用的：
这里我们直接通过Promise包装了一个新的数据，将Promise对象返回

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

//网络请求：aaa -> 自己处理(10行)
  //处理：aaa111 -> 自己处理(10行)
  //处理：aaa111222 -> 自己处理
//1.
  new Promise((resolve,reject) =>{
    setTimeout(()=>{
      resolve('aaa')
    },1000)
  }).then(res =>{
    //1.自己处理10行代码
    console.log(res,'第一层的10行处理代码');

    //2.对结果进行第一次处理
    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行处理代码');
  })

//2.
//new Promise(resolve => 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行处理代码');
  })

//3.
  //省略掉Promise.resolve
  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行处理代码');
  })

如果中间有一次需要对异常做处理：

//1.
  new Promise((resolve,reject) =>{
    setTimeout(()=>{
      resolve('aaa')
    },1000)
  }).then(res =>{
    //1.自己处理10行代码
    console.log(res,'第一层的10行处理代码');

    //2.对结果进行第一次处理
    return new Promise((resolve,reject) =>{
      // resolve(res+'111');
      reject('error');
    })
  }).then(res =>{
    console.log(res,'第二层的10行处理代码');

    return new Promise(resolve=>{
      resolve(res+'222');
    })
  }).then(res =>{
    console.log(res,'第三层的10行处理代码');
  }).catch(err =>{
    console.log(err);
  })

//2.
//new Promise(resolve => 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')
    //return Promise.reject('error');
    throw 'error'
  }).then(res =>{
    console.log(res,'第三层的10行处理代码');
  }).catch(err =>{
    console.log(err);
  })

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('result1')
    },2000)
  }),
  new Promise((resolve, reject) => {
   setTimeout(()=>{
     resolve('result2')
   },1000)
  })
]).then(results =>{
  console.log(results);
})