---

前言

本博客仅做学习笔记，如有侵权，联系后即刻更改

科普：

---

定义

异步编程的解决方案
1

常见应用场景：

• 网络请求

一般情况下，对异步操作进行封装

• new -> 构造函数

1. 保存状态信息
2. 执行传入的函数)

• 在执行传入的回调函数时，会传入resolve、reject，本身也是函数

Promise基本使用

  new Promise((resolve, reject) => {
    setTimeout(() => {
        // 成功时调用
        // resolve('hello1')
      // 失败时调用
      reject('error')
      },1000)
    }).then((data) => {
      console.log(data);
  }).catch((data) => {
    console.log(data);
  })
1
2
3
4
5
6
7
8
9
10
11
12

回调函数合并

//then和catch合并为一个then函数
new Promise((resolve, reject) => {
  setTimeout(() => {
    // 成功时调用
    resolve('hello1')
    // 失败时调用
    // reject('error')
  },1000)
}).then((data) => {
  console.log(data);
},(data) => {
  console.log(data);
})
1
2
3
4
5
6
7
8
9
10
11
12
13

Promise链式调用

网络请求: 处理代码分段需求

链式调用

• 简写: new Promise(resolve => resolve(结果))
• 再简写: 省略掉Promise.resolve
• 抛出异常时，后面的网络请求中断

 new Promise((resolve,reject) => {
    setTimeout(() =>{
      resolve('000')
    },1000)
  }).then(res => {
    console.log(res,'第一层代码');

    return new Promise((resolve, reject) => {
      // resolve(res + '111')
      //抛出异常
      // reject('error')
      throw 'error plus'
    })
  }).then(res => {
    console.log(res,'第二层代码');
  }).catch(err => {
    console.log(err);
  })

//简写: new Promise(resolve => resolve(结果))
//return  Promise.resolve(res + '111')
// 再简写: 省略掉Promise.resolve
//return  res + '111'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

Promise的All方法

应用场景

• 多个网络请求
  都得到数据后才能进行下一步操作

all使用

// 使用setTimeout模拟网络请求
// 延时为一秒的会等待二秒延时同时输出
  Promise.all([
      new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve({name: 'zjc', age: 20})
        },2000)
      }),
      new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve({name: 'zjc', age: 21})
        },1000)
    })
  ]).then(results => {
  console.log(results);
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

使用变量记录实现

定义变量记录网络请求状态

  let isResult1 = false
  let isResult2 = false
  // 请求一:
  $ajax({
    url : "",
    success : function() {
      console.log('结果1');
      isResult1 = true
      handleResult()
    }
  })
  //请求二:
  $ajax({
    url : ' ',
    success : function() {
      console.log('结果2');
      isResult2 = true
      handleResult()
    }
  })
  //判断两个请求都完成后进行下一步处理
  function handleResult(){
    if (isResult1 && isResult2) {
    //
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

总结

小小励志

有些事你现在不做，一辈子都不会做了。
如果你想做一件事，全世界都会为你让路。
《搭车去柏林》