每天3分钟，重学ES6-ES12(九)Promise简单介绍

虎妞先生

发布于 2022-10-27 20:02:45

1970

发布于 2022-10-27 20:02:45

文章被收录于专栏：前端开疆扩土之路前端开疆扩土之路

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第20天，点击查看活动详情

每天3分钟，重学ES6-ES12文章汇总

前言

今天开始和大家一起系统的学习ES6+,每天3分钟，用一把斗地主的时间，重学ES6+，今天介绍的是ES6中新增的内容Promise

异步任务的处理

在ES6出来之后，有很多关于Promise的讲解、文章，也有很多经典的书籍讲解Promise
- 虽然等你学会Promise之后，会觉得Promise不过如此，但是在初次接触的时候都会觉得这个东西不好理解;
那么这里我从一个实际的例子来作为切入点:
- 我们调用一个函数，这个函数中发送网络请求(我们可以用定时器来模拟);
- 如果发送网络请求成功了，那么告知调用者发送成功，并且将相关数据返回过去;
- 如果发送网络请求失败了，那么告知调用者发送失败，并且告知错误信息;代码演示

/**

 * 这种回调的方式有很多的弊端:

 *  1> 如果是我们自己封装的requestData,那么我们在封装的时候必须要自己设计好callback名称, 并且使用好

 *  2> 如果我们使用的是别人封装的requestData或者一些第三方库, 那么我们必须去看别人的源码或者文档, 才知道它这个函数需要怎么去获取到结果

 */
// request.js
function requestData(url, successCallback, failtureCallback) {
  // 模拟网络请求
  setTimeout(() => {
    // 拿到请求的结果
    // url传入的是yz, 请求成功
    if (url === "yz") {
      // 成功
      let names = ["abc", "cba", "nba"]
      successCallback(names)
    } else { // 否则请求失败
      // 失败
      let errMessage = "请求失败, url错误"
      failtureCallback(errMessage)
    }
  }, 3000);
}
// main.js
requestData("kobe", (res) => {
  console.log(res)
}, (err) => {
  console.log(err)
})

什么是Promise呢？

在上面的解决方案中，我们确确实实可以解决请求函数得到结果之后，获取到对应的回调，但是它存在两个主要的问题:
- 第一，我们需要自己来设计回调函数、回调函数的名称、回调函数的使用等;
- 第二，对于不同的人、不同的框架设计出来的方案是不同的，那么我们必须耐心去看别人的源码或者文档，以便可以理解它这个函数到底怎么用;
我们来看一下Promise的API是怎么样的:
- Promise是一个类，可以翻译成承诺、许诺、期约;
- 当我们需要给予调用者一个承诺:待会儿我会给你回调数据时，就可以创建一个Promise的对象;
- 在通过new创建Promise对象时，我们需要传入一个回调函数，我们称之为executor;
  - 这个回调函数会被立即执行，并且给传入另外两个回调函数resolve、reject;
  - 当我们调用resolve回调函数时，会执行Promise对象的then方法传入的回调函数;
  - 当我们调用reject回调函数时，会执行Promise对象的catch方法传入的回调函数;

Promsise 代码结构

我们来看一下Promise代码结构: 下面Promise使用过程，我们可以将它划分成三个状态:

待定(pending): 初始状态，既没有被兑现，也没有被拒绝;
- 当执行executor中的代码时，处于该状态;
已兑现(fulfilled): 意味着操作成功完成;
- 执行了resolve时，处于该状态;
已拒绝(rejected): 意味着操作失败;
- 执行了reject时，处于该状态;

function foo() {
  // Promise
  return new Promise((resolve, reject) => {
    resolve("success message")
    // reject("failture message")
  })
}

const fooPromise = foo()
// then方法传入的回调函数两个回调函数:
// > 第一个回调函数, 会在Promise执行resolve函数时, 被回调
// > 第二个回调函数, 会在Promise执行reject函数时, 被回调

fooPromise.then((res) => {
  console.log(res)
}, (err) => {
  console.log(err)
})

//catch方法传入的回调函数, 会在Promise执行reject函数时, 被回调

fooPromise.catch(() => {
})


// 传入的这个函数, 被称之为 executor
// > resolve: 回调函数, 在成功时, 回调resolve函数
// > reject: 回调函数, 在失败时, 回调reject函数

const promise = new Promise((resolve, reject) => {
    console.log("promise传入的函数被执行了")
   // resolve()
    reject()
})

promise.then(() => {
})

promise.catch(() => {
})

Promise重构请求

那么有了Promise，我们就可以将之前的代码进行重构了:

// request.js
function requestData(url,) {
  // 异步请求的代码会被放入到executor中
  return new Promise((resolve, reject) => {
    // 模拟网络请求
    setTimeout(() => {
      // 拿到请求的结果
      // url传入的是yz, 请求成功
      if (url === "yz") {
        // 成功
        let names = ["abc", "cba", "nba"]
        resolve(names)
      } else { // 否则请求失败
        // 失败
        let errMessage = "请求失败, url错误"
        reject(errMessage)
      }
    }, 3000);
  })
}

// main.js
const promise = requestData("coderwhy")
promise.then((res) => {
  console.log("请求成功:", res)
}, (err) => {
   console.log("请求失败:", err)
})