Promise

什么情况下用到promise？

  • 一般情况下是有异步操作时，使用Promise对这个异步操作进行封装,new->构造函数 （1.保存了一些状态信息 2.执行传入的函数）在执行传入的回调函数时。会传入两个参数，resolve ， reject。本身又是函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
new Promise((resolve, reject) => {
  setTimeout(()=>{
    //成功的时候调用resolve   下一步到.then
    resolve('hello world')
    //失败的时候调用reject    下一步到 .catch
    reject('error message')
  },1000)
}).then((data)=>{
  //1.100行的处理代码
  console.log(data);
  console.log(data);
  console.log(data);
  console.log(data);
}).catch((err)=>{
  console.log(err)
})

image-20200824154411395

Promise三种状态：

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

Promise链式调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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('err')
    })
  }).then(res=>{
    console.log(res,'第二层10行处理代码')
    return new Promise(resolve => {
      resolve(res+'222')
    })
  }).then(res=>{
    console.log(res,'第三层10行代码')
  }).catch(err=>{
    console.log(err);

  • Promise.all方法

  •  Promise.all([
      // new Promise((resolve, reject) => {
      //   $ajax({
      //     url: '',
      //     success: function (data) {
      //     resolve(data)
      //     }
      //   })
      // }),
      // new Promise((resolve, reject) => {
      //   $ajax({
      //     url: '',
      //     success: function () {
      //     resolve(data)
      //     }
      //   })
      // })
      // ]).then(result =>{
      //   console.log(result);
      // })

    new Promise((resolve, reject) => {
     setTimeout(()=>{
       resolve('result1')
     },2000)
    }),
    new Promise((resolve, reject) => {
     setTimeout(()=>{
       resolve('result2')
     },1000)
    })
  ]).then(result =>{
    console.log(result);
  })