AJAX(三)--promise

152 阅读2分钟

简单回调

假设现在有一个名为createAudioFileAsync()的函数,如果给出一些配置和两个回调函数,这个函数能异步地生成音频文件。一个回调函数是文件成功创建时的回调,另一个则是出现异常时的回调。

// 成功的回调函数
function successCallback(result) {
  console.log("音频文件创建成功: " + result);
}

// 失败的回调函数
function failureCallback(error) {
  console.log("音频文件创建失败: " + error);
}

createAudioFileAsync(audioSettings, successCallback, failureCallback)

promise回调

如果函数 createAudioFileAsync() 被重写为返回Promise 对象的形式,就可以像这样简单地

createAudioFileAsync(audioSettings).then(successCallback, failureCallback);

特点

不同于“老式”的传入回调,在使用 Promise 时,会有以下特点,链式调用,then() 函数会返回一个全新的 Promise,和原来的不同

promise的基本用法

let p = new Promise((resolve, reject) => {
  // 做一些事情
  // 然后在某些条件下resolve,或者reject
  if (/* 条件随便写^_^ */) {
    resolve()
  } else {
    reject()
  }
})

p.then(() => {
    // 如果p的状态被resolve了,就进入这里
}, () => {
    // 如果p的状态被reject
})

第一段调用了Promise构造函数,第二段是调用了promise实例的.then方法

  1. 构造实例
  • 构造函数接受一个函数作为参数
  • 调用构造函数得到实例p的同时,作为参数的函数会立即执行
  • 参数函数接受两个回调函数参数resolve和reject
  • 在参数函数被执行的过程中,如果在其内部调用resolve,会将p的状态变成fulfilled,或者调用reject,会将p的状态变成rejected
  1. 调用.then调用
  • .then可以为实例p注册两种状态回调函数
  • 当实例p的状态为fulfilled,会触发第一个函数执行
  • 当实例p的状态为rejected,则触发第二个函数执行

原理

  • 将异步过程转化成promise对象
  • 对象有3种状态
  • 通过.then注册状态的回调
  • 已完成的状态能触发回调
  • resolve函数的作用是,将Promise对象的状态从“未完成”变为“成功”(即从 pending 变为resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;
  • reject函数的作用是,将Promise对象的状态从“未完成”变为“失败”(即从 pending 变为rejected), 在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。