⚡ 30 秒速记

  • 承诺保存一次异步结果,落定后不能反转
  • 执行器同步运行,反应回调异步安排
  • then 返回新承诺,承接值、异常或其他承诺
  • 返回内层任务才能把它接进链
  • 聚合失败不等于取消其他底层任务

Promise 像一张结果收据,先拿到收据,等工作结束后再读取成功值或失败原因。 执行器创建时同步执行,then 回调则异步运行;每次链式调用产生新承诺,回调返回值、抛错或返回的异步任务决定下一步结果。已经落定的状态不能翻转,但用另一个承诺解析时可能仍在等待它。写链条最容易漏掉 return,让内层任务脱离整体错误处理。

版本校准: 原理文章中的代码代表特定实现与写作时间。应用到当前项目时,应先确认浏览器、框架或工具的主版本,再区分稳定的规范语义、可变化的内部实现和项目自身约束。

# 一、Promise基础用法

# 1.1 基本用法

new Promise(function(resolve, reject) {
    //待处理的异步逻辑
    //处理结束后,调用resolve或reject方法
})
  • 新建一个promise很简单,只需要new一个promise对象即可。其中 Promise 是构造函数,创建出来的承诺是对象,它接受一个函数作为参数,并且会返回promise对象,这就给链式调用提供了基础
  • 其实Promise函数的使命,就是构建出它的实例,并且负责帮我们管理这些实例。而这些实例有以下三种状态:
  • pending: 初始状态,未兑现或拒绝
  • fulfilled: 意味着操作成功完成
  • rejected: 意味着操作失败

pending 状态的 Promise对象可能以 fulfilled状态返回了一个值,也可能被某种理由(异常信息)拒绝(reject)了。当其中任一种情况出现时,Promise 对象的 then 方法绑定的处理方法(handlers)就会被调用,then方法分别指定了resolve方法和reject方法的回调函数

img

var promise = new Promise(function(resolve, reject) {
  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});
promise.then(function(value) {
  // 如果调用了resolve方法,执行此函数
}, function(value) {
  // 如果调用了reject方法,执行此函数
});

上述代码很清晰的展示了promise对象运行的机制。下面再看一个示例:

function getJSON(url) {
  return new Promise((resolve, reject) => {
    const client = new XMLHttpRequest()
    client.open('GET', url)
    client.responseType = 'json'
    client.timeout = 10000
    client.setRequestHeader('Accept', 'application/json')
    client.onload = () => {
      if (client.status >= 200 && client.status < 300) resolve(client.response)
      else reject(new Error('HTTP ' + client.status))
    }
    client.onerror = () => reject(new Error('Network error'))
    client.ontimeout = () => reject(new Error('Request timed out'))
    client.onabort = () => reject(new Error('Request aborted'))
    client.send()
  })
}
getJSON("/posts.json").then(function(json) {
  console.log('Contents: ' + json);
}, function(error) {
  console.error('出错了', error);
});
webapp
公众号
开发者导航
切换夜间模式
点击侧边栏上一篇
点击侧边栏下一篇
折叠侧边栏
收起全部