前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航

浅析Promise原理

首页
2018-12-20 16:30:43
Front-End
PromiseJavascript

# 一、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方法的回调函数

var promise = new Promise(function(resolve, reject) {
  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});
promise.then(function(value) {
  // 如果调用了resolve方法,执行此函数
}, function(value) {
  // 如果调用了reject方法,执行此函数
});
@前端进阶之旅: 代码已经复制到剪贴板

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

var getJSON = function(url) {
  var promise = new Promise(function(resolve, reject){
    var client = new XMLHttpRequest();
    client.open("GET", url);
    client.onreadystatechange = handler;
    client.responseType = "json";
    client.setRequestHeader("Accept", "application/json");
    client.send();
    function handler() {
      if (this.status === 200) { 
              resolve(fe
  • 一、Promise基础用法
    • 1.1 基本用法
    • 1.2 promise捕获错误
    • 1.3 常用的promise方法
    • 1.4 Async/await简化写法
    • 1.5 Generator
  • 二、Promise实现原理剖析
    • 2.1 Promise标准
    • 2.2 实现Promise
    • 2.3 极简promise雏形
    • 2.4 加入延时机制
    • 2.5 加入状态
    • 2.6 链式Promise
    • 2.7 失败处理
    • 2.8 异常处理
    • 2.9 完整实现
    • 2.10 小结
  • 三、参考

← React之connect组件React Router原理 →