Promise回调地狱的拯救者

Promise 对象

概述

Promise是异步编程的一种解决方案

从语法上说，Promise 是一个对象，从它可以获取异步操作的消息

Promise对象有两个特点：

• 对象的状态不受外界影响。有三种状态：
  1. pending：进行中
  2. fulfilled：已成功（resolved）
  3. rejected：已失败
• 一旦状态改变，就不会再该变，任何时候都可以得到这个结果

状态的缺点:

1. 无法取消 Promise ，一旦新建它就会立即执行，无法中途取消
2. 如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部
3. 当处于 pending 状态时，无法得知目前进展到哪一个阶段（不知道是刚刚开始还是即将完成）

回到顶部 目录

Promise解决异步的优点

回调地狱：某个异步操作需要等待之前的异步操作完成，无论回调是事件还是其他函数，都会陷入不断的嵌套（简单来说就是无数的嵌套函数）

Promise的出现，可以将异步操作以同步的流程表达出来，很好的解决了回调地狱

基本用法

Promise对象是一个构造函数，该函数有两个参数：

• resolve：在异步操作成功时调用，并将异步操作的结果，作为参数传递出去
• reject：在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去

const p = new Promise(function(resolve,reject){
    console.log('one');
    resolve('three');
});
 
p.then(resolve => {
    console.log(resolve);
}, err => {
    console.log(err);
});

console.log('tow');

• Promise 新建后就会立即执行

then方法

Promise实例生成以后，可以用``分别指定resolved状态和rejected状态的回调函数

该方法的两个参数：

1. 回调函数是Promise对象的状态变为resolved时调用（必须）
2. 回调函数是Promise对象的状态变为rejected时调用（可选）

回到顶部 目录

Promise对象实现的 Ajax 操作

const ajax = function(url) {
  return new Promise(function(resolve, reject){
    const xml = new XMLHttpRequest();
    xml.open("GET", url, true);
    xml.onreadystatechange = function() {
      
      if (this.readyState !== 4) {
        return;
      }
      if (this.status === 200) {
        resolve(this.responseText);
      } else {
        reject(new Error(this.statusText));
      }
    };
    xml.send();

  });
};

ajax("data.json").then(res => {
  console.log(res);
  return res;
}).catch(err => {
  console.log(err);
})
.then(function(res) {
  console.log(res);
})

Promise对象实现的图片加载

const getImage = function (path) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload  = resolve;
    img.onerror = reject;
    img.src = path;
  });
};

回到顶部 目录

方法

方法|用途
:–|:–|:–
Promise.prototype.then(resolved[,rejected])|为Promise实例添加状态改变时的回调函数
Promise.prototype.catch(rejection)|用于指定发生错误时的回调函数(只要Promise方式错误就可以捕获)
Promise.prototype.finally()|用于指定不管 Promise 对象最后状态如何，都会执行的操作(ES2018)
Promise.all([new Promise,…])|这个方法会返回一个新的promise对象，如果里面所有的promise对象都成功才会触发，一旦有一个失败，则该promise对象为失败
Promise.race([new Promise,…])|当参数中的任意一个promise对象完成时候，就马上回去使用完成的这个promise对象的结果，不管这个结果成功还是失败
Promise.allSettled([new Promise,…])|这个方法会返回一个新的promise对象，只有等到所有这些参数实例都返回结果，不管是fulfilled还是rejected，包装实例才会结束(ES2020)
Promise.resolve([*])|将现有对象转为 Promise 对象
Promise.reject(reason)|返回一个新的 Promise 实例，该实例的状态为rejected
Promise.try()|类似于try{}异常处理机制

方法详解

看这期前可以先查看：JavaScript异步和渲染过程

回到顶部 目录