《深入理解ES6》阅读笔记 --- Promise与异步编程

最新推荐文章于 2023-01-27 22:13:22 发布

转载最新推荐文章于 2023-01-27 22:13:22 发布 · 557 阅读

文章标签：

#promise #JavaScript #前端 #异步

javascript 同时被 3 个专栏收录

67 篇文章

订阅专栏

ES6

24 篇文章

订阅专栏

前端前沿

24 篇文章

订阅专栏

本文介绍了JavaScript中的异步编程概念，探讨了如何使用Promise解决回调地狱的问题，展示了Promise的基本用法及其实现Ajax请求的方式。此外，还提到了Promise.all和Promise.race等高级用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在异步编程概念已经普及的今天，我们依然要谈一谈它，对于我们做前端代码的意义。当你通过Ajax请求数据使用回调函数来获取数据时，这就是一种异步编程。

$.ajax({
  url: 'xxx',
  success: function(data){
    // data
  }
})

考虑到JavaScript属于单线程的特点，异步对于这门语言就可见多么的重要。你可以试着想想，当我们没有异步时，我正准备提交一个信息，界面就卡住了，一直要等待信息返回结果才能有接下来的其他操作，这很痛苦。在JavaScript的世界里，异步是非常重要的一件事情。

Promise正是想来处理这样的异步编程，如果我们用Promise该如何处理这段Ajax？

function fetch(){
  return new Promise(function(resolve,reject){
    $.ajax({
      url: 'xxx',
      success:function(data){
        resolve(data)
      },
      error:function(error){
        reject(error)
      }
    })
  })
}

fetch().then(function(data){

}).catch(function(error){})

这辅助我们避免了回调地狱式的恐惧，更优雅的处理了回调。如果，你有兴趣，可以配合着 Promise 来学习【理论上的内容，可以仔细阅读】。

Promise声明周期

进行中（pending）
已经完成（fulfilled）
拒绝（rejected）

如同上面Ajax的例子，我们可以很好的包装一个函数，让fetch函数返回一个Promise对象。在Promise构造函数里，可以传入一个callback，并且在这里完成主体逻辑的编写。唯一需要注意的是：Promise对象只能通过resolve和reject函数来返回，在外部使用then或catch来获取。如果你直接抛出一个错误（throw new Error('error')），catch也是可以正确的捕获到的。

Promise其他的方法

Promise.all（当所有在可迭代参数中的 promises 已完成，或者第一个传递的 promise（指 reject）失败时，返回 promise。）

var p1 = Promise.resolve(3);
var p2 = 1337;
var p3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, "foo");
}); 

Promise.all([p1, p2, p3]).then(values => { 
  console.log(values); // [3, 1337, "foo"] 
});

Promise.race（返回一个新的 promise，参数iterable中只要有一个promise对象"完成（resolve）"或"失败（reject）"，新的promise就会立刻"完成（resolve）"或者"失败（reject）"，并获得之前那个promise对象的返回值或者错误原因。）

var p1 = new Promise(function(resolve, reject) { 
    setTimeout(resolve, 500, "one"); 
});
var p2 = new Promise(function(resolve, reject) { 
    setTimeout(resolve, 100, "two"); 
});

Promise.race([p1, p2]).then(function(value) {
  console.log(value); // "two"
  // 两个都完成，但 p2 更快
});

有趣的是如果你使用ES6的class，你是可以去派生Promise的，就像我们想派生Array一样：

class MePromise extends Promise{
 // 处理 ...
}

那么，除了Promise还有没有更牛逼的方案？这是有的，目前的异步编程已经从最初的callback进化到了如下的顺序。

callback -> Promise -> generator -> async await

未来，肯定属于async await了。