【Promise入门篇】JS--ES6--promise对象详解和基本使用(含代码)

🚀Promise入门篇 1.1 🚩Promise是什么？ 1.1.1 🚧理解

1. 抽象表达：

   ① Promise是一门新的技术（ES6规范）

   ② Promise是JS中进行异步编程的新解决方案

   备注：旧方案是单纯使用回调函数

   异步编程有：

   1、fs文件操作（fs是node.js下的一个模块，可以对磁盘进行读写操作）

   required('fs').readFile('./index.html'，(err，data)=>{})
   

   2、数据库操作

   3、AJAX

   $.get('/server'，(data)=>{})
   

   4、 定时器

   setTimeout(()=>{},2000)
   

2. 具体表达：

   ① 从语法上来说：Promise是一个构造函数 ② 从功能上来说：Promise对象用来封装一个异步操作，并可以获取其成功/失败的结果值

1.2 🏁为什么要用promise?

1. 指定回调函数的方式更加灵活

   • 旧的: 必须在启动异步任务前指定

   • promise: 启动异步任务 => 返回promie对象 => 给promise对象绑定回调函数(甚至可以在异步任务结束后指定/多个)

2. 支持链式调用，可以解决回调地狱问题

• 什么是回调地狱?

  回调函数嵌套调用, 外部回调函数异步执行的结果是嵌套的回调执行的条件

• 回调地狱的缺点?

  不便于阅读

  不便于异常处理

• 解决方案?

  promise 链式调用

• 终极解决方案?

  async/await

1.3 🏳‍🌈promise的状态改变

promise的状态是promise实例对象身上的一个属性（内置属性），属性名为【PromiseState】

PromiseState属性对应的值有以下三个：

1. 初始状态为pending（未决定的）
2. pending变为resolved/fullfilled（表示成功）
3. pending变为rejected（表示失败）

​ 说明：只有这2种，且一个promise对象只能改变一次

​ 状态不能由成功变为失败，或失败变为成功

​ 无论变为成功还是失败，都会有一个结果数据

​ 成功的结果数据一般称为value，失败的结果数据一般称为reason

promise 对象的值:实例对象中的另一个属性 【PromiseResult】

保存着异步任务【成功/失败】的结果

resolve（）和reject（）可以对实例对象的值进行修改

1.4 🚂promise的基本流程

1.5 🚗promise的基本使用 1️⃣使用1：基本编码流程

需求:

​ 点击按钮，2s后显示是否中奖(30%概率中奖)

​ 若中奖弹出 恭喜恭喜，中100万！

​ 若未中奖弹出 再接再厉

效果：

代码实现：

  
    promise初体验
    点击抽奖
  
  
    // 生成随机数
    function rand(m, n) {
      return Math.ceil(Math.random() * (n - m + 1)) + m - 1
    }
    // 获取元素对象
    const btn = document.querySelector('#btn')
    // 绑定单击事件
    btn.addEventListener('click', function () {
      // 定时器 回调函数形式
      // setTimeout(() => {
      // 30% 1-100
      // 获取从1-100的一个随机数
      // let n = rand(1, 100)
      // 判断
      //   if (n  {
        // 定时器 在执行器函数中启动异步任务
        setTimeout(() => {
          // 30% 1-100
          // 获取从1-100的一个随机数
          let n = rand(1, 100)
          // 判断
          //根据结果做不同处理,如果成功了, 调用 resolve(), 指定成功的 value, 变为resolved状态
          if (n  {
        // 成功执行第一个回调函数
        alert('恭喜恭喜，中100万！您的中奖数字为' + value)
      }, (reason) => {
        // 失败执行第二个回调函数
        alert('再接再厉，您的号码为' + reason)
      })
    })

  

2️⃣使用2：使用 promise 封装 ajax 异步请求

  
    promise 封装 AJAX 操作
    点击发送 AJAX
  
  
    const btn = document.querySelector('#btn')

    btn.addEventListener('click', function () {
      // 1. 创建 promise 对象
      const p = new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()
        xhr.open('GET', 'http://127.0.0.1:8000/server-promise')
        xhr.send()
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status  {
        console.log(value)
      }, reason => {
        console.log(reason)
      })
    })
  

3️⃣使用3：使用promise封装读取文件的函数

/* 
  封装一个函数 mineReadFile 读取文件内容
  参数：path 文件路径
  返回：promise 对象
*/
function mineReadFile(path) {
  return new Promise((resolve, reject) => {
    // 读取文件
    require('fs').readFile(path, (err, data) => {
      //  判断 失败
      if (err) reject(err)
      // 成功
      resolve(data)
    })
  })
}
mineReadFile('./resource/content.txt')
  .then(value => {
    // 输出文件内容
    console.log(value.toString())
  }, reason => {
    console.log(reason)
  })

不需要手动封装一个函数方法如下：使用node.js中内置的一个方法 promisify，属于util模块

// 引入util模块
const util = require('util')
// 引入fs模块
const fs = require('fs')
// 返回一个新的promise风格的函数
// 向util模块的promisify传一个err风格的函数，会自动帮我们封装好，
// 返回一个新的函数，这个函数是返回promise对象
let mineReadFile = util.promisify(fs.readFile)

mineReadFile('./resource/content.txt').then(value => {
  console.log(value.toString())
})

今天的分享就到这里啦 ✨ 下一篇文章讲关于Promise相关API的使用 期待大佬们的来访哦！ 点赞🌹收藏💖关注🤞