JS之Promise(必会),手写promise


前言

Promise是前端异步编程必须掌握的知识点


下面详细介绍一下,promise是什么

一、Promise有什么用?

1.异步编程

由于JS是单线程的语言,也就是说,同一个时间只能做一件事。因为 Javascript 作为一门浏览器端的脚本语言,主要的任务就是处理用户的交互,而用户的交互无非就是响应 DOM 上的一些事件/增删改 DOM 中的元素。这决定了它只能是单线程,否则会带来很复杂的同步问题。比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准?所以JS要提高性能只能采用异步编程的方式。

异步编程的方法大概有以下几种:

  • 回调函数
  • 事件监听
  • 发布/订阅
  • Promise对象
  • await/async

异步编程是 JavaScript 编程的麻烦事
从最早的回调函数,到 Promise 对象,再到 Generator 函数,每次都有所改进,但又让人觉得不彻底。它们都有额外的复杂性,都需要理解抽象的底层运行机制。

2.Promise能解决什么问题

回调函数出现多层回调嵌套的时候代码不是纵向发展,而是横向发展,很快就会乱成一团,无法管理。这种情况就称为"回调函数噩梦"(callback hell)
Promise就是为了解决这个问题而提出的。它不是新的语法功能,而是一种新的写法,允许将回调函数的横向加载,改成纵向加载即promise的then实现这种链式回调。
这种不连续的执行,就叫做异步,相应地,连续的执行,就叫做同步。
可以看到,Promise 的写法只是回调函数的改进,使用then方法以后,异步任务的两段执行看得更清楚了。

3.Promise的优势

  • 在异步执行的流程中,把执行代码和处理结果的代码清晰地分离了
  • 链式调用,错误会层层传递,直到catch被捕获

二、什么是promise

1.Promise介绍

Promise 是一个对象,代表了未来将要发生的事件,用来传递异步操作的消息,代表了一个异步操作的最终完成或者失败。因为大多数人仅仅是使用已创建的 Promise 实例对象。

2.Promise特点

1、对象的状态不受外界影响。Promise 对象代表一个异步操作,有三种状态:

  • pending: 初始状态,不是成功或失败状态。
  • fulfilled:意味着操作成功完成。
  • rejected:意味着操作失败。
    在这里插入图片描述

只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是 Promise
这个名字的由来,它的英语意思就是「承诺」,表示其他手段无法改变。

2、一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise 对象的状态改变,只有两种可能:从 Pending 变为 Resolved 和从 Pending 变为 Rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果。就算改变已经发生了,你再对 Promise 对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。

3.Promise缺点

  • 无法取消 Promise,一旦新建它就会立即执行,无法中途取消
  • 如果不设置回调函数,Promise 内部抛出的错误,不会反应到外部
  • 当处于 Pending 状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。
    Promise 是一个对象,它代表了一个异步操作的最终完成或者失败。因为大多数人仅仅是使用已创建的 Promise 实例对象。

三、Promise应用

1.Promise创建

要想创建一个 promise 对象、可以使用 new 来调用 Promise 的构造器来进行实例化。
下面是创建 promise 的步骤:

var promise = new Promise(function(resolve, reject) {
    // 异步处理
    // 处理结束后、调用resolve 或 reject
});

Promise 构造函数包含一个参数和一个带有 resolve(解析)和 reject(拒绝)两个参数的回调。在回调中执行一些操作(例如异步),如果一切都正常,则调用 resolve,否则调用 reject。

resolve方法,在异步成功时调用,作用是将Promise对象的状态从pending转为fulfilled状态,并将成功的结果作为resolve参数传递出去。改变状态,传递参数

reject方法,在异步失败时调用,作用是将Promise对象的状态从pending转为rejected状态,并将成功的结果作为reject参数传递出去。改变状态,传递参数

var myFirstPromise = new Promise(function(resolve, reject){
    //当异步代码执行成功时,我们才会调用resolve(...), 当异步代码失败时就会调用reject(...)
    //在本例中,我们使用setTimeout(...)来模拟异步代码,实际编码时可能是XHR请求或是HTML5的一些API方法.
    setTimeout(function(){
        resolve("成功!"); //代码正常执行!
    }, 250);
});
 
myFirstPromise.then(function(successMessage){
    //successMessage的值是上面调用resolve(...)方法传入的值.
    //successMessage参数不一定非要是字符串类型,这里只是举个例子
    document.write("Yay! " + successMessage);
});

对于已经实例化过的 promise 对象可以调用 promise.then() 方法,传递 resolve 和 reject 方法作为回调。promise.then() 是 promise 最为常用的方法。

promise.then(onFulfilled, onRejected)
//promise简化了对error的处理,上面的代码我们也可以这样写:
promise.then(onFulfilled).catch(onRejected)

2.Promise Ajax

下面是一个用 Promise 对象实现的 Ajax 操作的例子。

function ajax(URL) {
    return new Promise(function (resolve, reject) {
        var req = new XMLHttpRequest(); 
        req.open('GET', URL, true);
        req.onload = function () {
        if (req.status === 200) { 
                resolve(req.responseText);
            } else {
                reject(new Error(req.statusText));
            } 
        };
        req.onerror = function () {
            reject(new Error(req.statusText));
        };
        req.send(); 
    });
}
var URL = "/try/ajax/testpromise.php"; 
ajax(URL).then(function onFulfilled(value){
    document.write('内容是:' + value); 
}).catch(function onRejected(error){
    document.write('错误:' + error); 
});
//上面代码中,resolve 方法和 reject 方法调用时,都带有参数。它们的参数会被传递给回调函数。reject 方法的参数通常是 Error 对象的实例,而 resolve 方法的参数除了正常的值以外,还可能是另一个 Promise 实例,比如像下面这样。
var p1 = new Promise(function(resolve, reject){
  // ... some code
});
 
var p2 = new Promise(function(resolve, reject){
  // ... some code
  resolve(p1);
})
//上面代码中,p1 和 p2 都是 Promise 的实例,但是 p2 的 resolve 方法将 p1 作为参数,这时 p1 的状态就会传递给 p2。如果调用的时候,p1 的状态是 pending,那么 p2 的回调函数就会等待 p1 的状态改变;如果 p1 的状态已经是 fulfilled 或者 rejected,那么 p2 的回调函数将会立刻执行。

3.Promise.prototype.then方法:链式操作

Promise.prototype.then 方法返回的是一个新的 Promise 对象,因此可以采用链式写法。

getJSON("/posts.json").then(function(json) {
  return json.post;
}).then(function(post) {
  // proceed
});
//上面的代码使用 then 方法,依次指定了两个回调函数。第一个回调函数完成以后,会将返回结果作为参数,传入第二个回调函数。
//如果前一个回调函数返回的是Promise对象,这时后一个回调函数就会等待该Promise对象有了运行结果,才会进一步调用。


getJSON("/post/1.json").then(function(post) {
  return getJSON(post.commentURL);
}).then(function(comments) {
  // 对comments进行处理
});
//这种设计使得嵌套的异步操作,可以被很容易得改写,从回调函数的"横向发展"改为"向下发展"。

4.Promise.prototype.catch方法:捕捉错误

Promise.prototype.catch 方法是 Promise.prototype.then(null, rejection) 的别名,用于指定发生错误时的回调函数。

getJSON("/posts.json").then(function(posts) {
  // some code
}).catch(function(error) {
  // 处理前一个回调函数运行时发生的错误
  console.log('发生错误!', error);
});

Promise 对象的错误具有"冒泡"性质,会一直向后传递,直到被捕获为止。也就是说,错误总是会被下一个 catch 语句捕获。

getJSON("/post/1.json").then(function(post) {
  return getJSON(post.commentURL);
}).then(function(comments) {
  // some code
}).catch(function(error) {
  // 处理前两个回调函数的错误
});

5.Promise.all方法,Promise.race方法

Promise.all 方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。
var p = Promise.all([p1,p2,p3]);
上面代码中,Promise.all 方法接受一个数组作为参数,p1、p2、p3 都是 Promise 对象的实例。(Promise.all 方法的参数不一定是数组,但是必须具有 iterator 接口,且返回的每个成员都是 Promise 实例。)

p 的状态由 p1、p2、p3 决定,分成两种情况。

(1)只有p1、p2、p3的状态都变成fulfilled,p的状态才会变成fulfilled,此时p1、p2、p3的返回值组成一个数组,传递给p的回调函数。
(2)只要p1、p2、p3之中有一个被rejected,p的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数。

// 生成一个Promise对象的数组
var promises = [2, 3, 5, 7, 11, 13].map(function(id){
  return getJSON("/post/" + id + ".json");
});
Promise.all(promises).then(function(posts) {
  // ...  
}).catch(function(reason){
  // ...
});

Promise.race 方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例。

var p = Promise.race([p1,p2,p3]);

上面代码中,只要p1、p2、p3之中有一个实例率先改变状态,p的状态就跟着改变。那个率先改变的Promise实例的返回值,就传递给p的返回值。

如果Promise.all方法和Promise.race方法的参数,不是Promise实例,就会先调用下面讲到的Promise.resolve方法,将参数转为Promise实例,再进一步处理。

6.Promise.resolve 方法,Promise.reject 方法

有时需要将现有对象转为Promise对象,Promise.resolve方法就起到这个作用。

var jsPromise = Promise.resolve($.ajax('/whatever.json'));

上面代码将 jQuery 生成 deferred 对象,转为一个新的 ES6 的 Promise 对象。
如果 Promise.resolve 方法的参数,不是具有 then 方法的对象(又称 thenable 对象),则返回一个新的 Promise 对象,且它的状态为fulfilled。

var p = Promise.resolve('Hello');
 
p.then(function (s){
  console.log(s)
});
// Hello

上面代码生成一个新的Promise对象的实例p,它的状态为fulfilled,所以回调函数会立即执行,Promise.resolve方法的参数就是回调函数的参数。

如果Promise.resolve方法的参数是一个Promise对象的实例,则会被原封不动地返回。

Promise.reject(reason)方法也会返回一个新的Promise实例,该实例的状态为rejected。Promise.reject方法的参数reason,会被传递给实例的回调函数。

var p = Promise.reject('出错了');
 
p.then(null, function (s){
  console.log(s)
});
// 出错了
//上面代码生成一个Promise对象的实例,状态为rejected,回调函数会立即执行。

7、Promise.finally使用

1、特点

无论成功或失败,都会执行
返回的是一个promise

2、示例
let p = new Promise((resolve, reject) => {
    resolve(1000);
})
p.then(data => {
    console.log("success:" + data)
}).finally(() => {
    console.log("finally")
})

8、Promise.finally原理实现

在Promise实例上挂载finally 方法
p.finally(() => {})本质是一个then方法,所以在实现方法中要调用then方法
入参callback是一个函数,需要在then方法中执行这个函数
使用Promise.resolve会等f()的函数执行完再返回结果,并将上一个then的value返回
reject方法中需要抛出错误信息

Promise.prototype.finally = function (callback) {
    return this.then((value) => {
        // callback(); return value;
        // Promise.resolve会等callback()的函数执行完再返回结果
        return Promise.resolve(callback()).then(() => value);
    }, (err) => {
        return Promise.resolve(callback()).then(() => {throw err;});
    });
};

9、Promise.resolve原理实现

Promise.resolve()方法实际上调用的是new Promise()并调用resolve方法。

Promise.resolve = function (value) {
    if (value instanceof Promise) return value;
    if (value === null) return null;
    // 判断如果是promise
    if (typeof value === 'object' || typeof value === 'function') {
        try {
            // 判断是否有then方法
            let then = value.then;
            if (typeof then === 'function') {
                return new Promise(then.call(value)); // 执行value方法
            }
        } catch (e) {
            return new Promise( (resolve, reject) =>{reject(e);});
        }
    }
    return value;
};
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当你需要手写一个 Promise 的时候,你可以按照以下步骤进行: 1. 创建 Promise 构造函数,并传入一个执行器函数作为参数: ```javascript function MyPromise(executor) { // TODO: 实现 Promise 的状态和值的存储 } ``` 2. 在构造函数中创建状态和值的存储变量,并初始化为初始状态: ```javascript function MyPromise(executor) { this.state = 'pending'; this.value = undefined; // TODO: 实现其他必要的变量和逻辑 } ``` 3. 定义 resolve 和 reject 函数,用于在异步操作完成时改变 Promise 的状态和值,并添加对应的回调函数: ```javascript function MyPromise(executor) { this.state = 'pending'; this.value = undefined; const resolve = (value) => { if (this.state === 'pending') { this.state = 'fulfilled'; this.value = value; // TODO: 触发所有注册的成功回调函数 } }; const reject = (reason) => { if (this.state === 'pending') { this.state = 'rejected'; this.value = reason; // TODO: 触发所有注册的失败回调函数 } }; // TODO: 调用执行器函数,并传入 resolve 和 reject 函数 } ``` 4. 在构造函数中调用执行器函数,并传入 resolve 和 reject 函数: ```javascript function MyPromise(executor) { this.state = 'pending'; this.value = undefined; const resolve = (value) => { if (this.state === 'pending') { this.state = 'fulfilled'; this.value = value; // TODO: 触发所有注册的成功回调函数 } }; const reject = (reason) => { if (this.state === 'pending') { this.state = 'rejected'; this.value = reason; // TODO: 触发所有注册的失败回调函数 } }; try { executor(resolve, reject); } catch (error) { reject(error); } } ``` 5. 添加 then 方法,用于注册成功回调函数和失败回调函数,并返回一个新的 Promise 对象: ```javascript function MyPromise(executor) { this.state = 'pending'; this.value = undefined; this.onFulfilledCallbacks = []; this.onRejectedCallbacks = []; const resolve = (value) => { if (this.state === 'pending') { this.state = 'fulfilled'; this.value = value; // TODO: 触发所有注册的成功回调函数 } }; const reject = (reason) => { if (this.state === 'pending') { this.state = 'rejected'; this.value = reason; // TODO: 触发所有注册的失败回调函数 } }; try { executor(resolve, reject); } catch (error) { reject(error); } } MyPromise.prototype.then = function(onFulfilled, onRejected) { // 创建新的 Promise 对象 const newPromise = new MyPromise((resolve, reject) => { // TODO: 根据当前 Promise 的状态和值执行对应的回调函数,并处理返回值 }); // 返回新的 Promise 对象 return newPromise; }; ``` 6. 在成功回调函数和失败回调函数中处理返回值,并根据返回值的类型决定新 Promise 对象的状态和值: ```javascript function MyPromise(executor) { this.state = 'pending'; this.value = undefined; this.onFulfilledCallbacks = []; this.onRejectedCallbacks = []; const resolve = (value) => { if (this.state === 'pending') { this.state = 'fulfilled'; this.value = value; // TODO: 触发所有注册的成功回调函数 } }; const reject = (reason) => { if (this.state === 'pending') { this.state = 'rejected'; this.value = reason; // TODO: 触发所有注册的失败回调函数 } }; try { executor(resolve, reject); } catch (error) { reject(error); } } MyPromise.prototype.then = function(onFulfilled, onRejected) { const newPromise = new MyPromise((resolve, reject) => { if (this.state === 'fulfilled') { // 如果当前 Promise 已经是 fulfilled 状态,则异步执行成功回调函数 setTimeout(() => { try { const result = onFulfilled(this.value); // 处理返回值,并根据返回值的类型决定新 Promise 对象的状态和值 handlePromiseResult(newPromise, result, resolve, reject); } catch (error) { reject(error); } }, 0); } else if (this.state === 'rejected') { // 如果当前 Promise 已经是 rejected 状态,则异步执行失败回调函数 setTimeout(() => { try { const result = onRejected(this.value); // 处理返回值,并根据返回值的类型决定新 Promise 对象的状态和值 handlePromiseResult(newPromise, result, resolve, reject); } catch (error) { reject(error); } }, 0); } else { // 如果当前 Promise 还是 pending 状态,则将回调函数添加到对应的队列中,等待执行 this.onFulfilledCallbacks.push(() => { setTimeout(() => { try { const result = onFulfilled(this.value); handlePromiseResult(newPromise, result, resolve, reject); } catch (error) { reject(error); } }, 0); }); this.onRejectedCallbacks.push(() => { setTimeout(() => { try { const result = onRejected(this.value); handlePromiseResult(newPromise, result, resolve, reject); } catch (error) { reject(error); } }, 0); }); } }); return newPromise; }; function handlePromiseResult(promise, result, resolve, reject) { if (promise === result) { // 如果返回的是当前 Promise 对象本身,则抛出 TypeError reject(new TypeError('Chaining cycle detected for promise')); } else if (result instanceof MyPromise) { // 如果返回的是一个 Promise 对象,则根据其状态和值决定新 Promise 对象的状态和值 if (result.state === 'fulfilled') { resolve(result.value); } else if (result.state === 'rejected') { reject(result.value); } else { // 如果返回的 Promise 对象还是 pending 状态,则等待其状态改变后再决定新 Promise 对象的状态和值 result.then(resolve, reject); } } else if (result && (typeof result === 'object' || typeof result === 'function')) { // 如果返回的是一个对象或函数,则尝试获取 then 方法 let then; try { then = result.then; } catch (error) { reject(error); } if (typeof then === 'function') { // 如果返回值有 then 方法,则将其视为 Promise-like 对象,并调用 then 方法 const promiseLikeObj = new MyPromise(then.bind(result)); promiseLikeObj.then(resolve, reject); } else { // 如果返回值没有 then 方法,则将其视为普通值,并将其作为新 Promise 对象的值 resolve(result); } } else { // 如果返回的是一个普通值,则将其作为新 Promise 对象的值 resolve(result); } } ``` 以上是一个简单的手写 Promise 的实现,仅供参考。实际上,原生的 Promise 还包含了更多的特性和细节,比如处理异步操作、链式调用、错误处理等等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值