1
<script>
2
  // 1) 创建 promise 对象(pending 状态), 指定执行器函数 const p = new
3
  Promise((resolve, reject) =>{" "}
4
  {
5
    // 2) 在执行器函数中启动异步任务
6
    setTimeout(() => {
7
      const time = Date.now();
8
      // 3) 根据结果做不同处理
9
      // 3.1) 如果成功了, 调用 resolve(), 指定成功的 value, 变为 resolved 状态
10
      if (time % 2 === 1) {
11
        resolve("成功的值 " + time);
12
      } else {
13
        // 3.2) 如果失败了, 调用 reject(), 指定失败的 reason, 变为rejected 状态
14
        reject("失败的值" + time);
15
      }
16
    }, 2000)
17
  }
18
  ) // 4) 能 promise 指定成功或失败的回调函数来获取成功的 vlaue 或失败的 reason p.then(
19
  value => {
20
    // 成功的回调函数 onResolved, 得到成功的 vlaue
21
    console.log("成功的 value: ", value)
22
  }, reason =>{" "}
23
  {
24
    // 失败的回调函数 onRejected, 得到失败的 reason
25
    console.log("失败的 reason: ", reason)
26
  }
27
  )
28
</script>

1
<script>
2
  function doDelay(time) {
3
    // 1. 创建 promise 对象
4
    return new Promise((resolve, reject) => {
5
    // 2. 启动异步任务
6
      console.log('启动异步任务')
7
      setTimeout(() => {
8
        console.log('延迟任务开始执行...')
9
        const time = Date.now() // 假设: 时间为奇数代表成功, 为偶数代表失败
10
        if (time %2=== 1) { // 成功了
11
          // 3. 1. 如果成功了, 调用 resolve()并传入成功的 value
12
          resolve('成功的数据 ' + time)
13
        } else { // 失败了
14
          // 3.2. 如果失败了, 调用 reject()并传入失败的 reason
15
          reject('失败的数据 ' + time)
16
        }
17
      }, time)
18
    })
19
  }
20
  const promise = doDelay(2000)
21
  promise.then(
22
    value => {
23
      console.log('成功的 value: ', value)
24
    },
25
    reason => {
26
      console.log('失败的 reason: ', reason)
27
    },
28
  )
29
</script>

1
<script>
2
  /*
3
  可复用的发 ajax 请求的函数: xhr + promise
4
  */
5
  function promiseAjax(url) {
6
    return new Promise((resolve, reject) => {
7
      const xhr = new XMLHttpRequest()
8
      xhr.onreadystatechange = () => {
9
      if (xhr.readyState!==4) return
10
        const {status, response} = xhr
11
        // 请求成功, 调用 resolve(value)
12
        if (status>=200 && status<300) {
13
          resolve(JSON.parse(response))
14
        } else { // 请求失败, 调用 reject(reason)
15
          reject(new Error('请求失败: status: ' + status))
16
        }
17
      }
18
      xhr.open("GET", url)
19
      xhr.send()
20
    })
21
  }
22
  promiseAjax('https://api.apiopen.top2/getJoke?page=1&count=2&type=video')
23
    .then(
24
      data => {
25
        console.log('显示成功数据', data)
26
      },
27
      error => {
28
        alert(error.message)
29
      }
30
    )
31
</script>

1
<script>
2
  // 成功的回调函数
3
  function successCallback(result) {
4
    console.log("声音文件创建成功: " + result);
5
  }
6
  // 失败的回调函数
7
  function failureCallback(error) {
8
    console.log("声音文件创建失败: " + error);
9
  }
10

11
  /* 1.1 使用纯回调函数 */
12
  createAudioFileAsync(audioSettings, successCallback, failureCallback)
13

14
  /* 1.2. 使用 Promise */
15
  const promise = createAudioFileAsync(audioSettings); // 2
16
  setTimeout(() => {
17
    promise.then(successCallback, failureCallback);
18
  }, 3000);
19

20
  /*2.1. 回调地狱*/
21
  doSomething(function(result) {
22
    doSomethingElse(result, function(newResult) {
23
      doThirdThing(newResult, function(finalResult) {
24
        console.log('Got the final result: ' + finalResult)
25
      }, failureCallback)
26
    }, failureCallback)
27
  }, failureCallback)
28

29
  /*2.2. 使用 promise 的链式调用解决回调地狱*/
30
  doSomething().then(function(result) {
31
    return doSomethingElse(result)
32
  })
33
  .then(function(newResult) {
34
    return doThirdThing(newResult)
35
  })
36
  .then(function(finalResult) {
37
    console.log('Got the final result: ' + finalResult)
38
  })
39
  .catch(failureCallback)
40

41
  /*2.3. async/await: 回调地狱的终极解决方案*/
42
  async function request() {
43
    try {
44
      const result = await doSomething()
45
      const newResult = await doSomethingElse(result)
46
      const finalResult = await doThirdThing(newResult)
47
      console.log('Got the final result: ' + finalResult)
48
    } catch (error) {
49
      failureCallback(error)
50
    }
51
  }
52
</script>