您当前的位置: 首页 > 

暂无认证

  • 0粉丝

    0关注

    0博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

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

发布时间:2022-06-22 19:38:15 ,浏览量:317

文章目录
  • 🚀Promise入门篇
    • 1.1 🚩Promise是什么?
      • 1.1.1 🚧理解
    • 1.2 🏁为什么要用promise?
    • 1.3 🏳‍🌈promise的状态改变
    • 1.4 🚂promise的基本流程
    • 1.5 🚗promise的基本使用
      • 1️⃣使用1:基本编码流程
      • 2️⃣使用2:使用 promise 封装 ajax 异步请求
      • 3️⃣使用3:使用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的使用 期待大佬们的来访哦! 点赞🌹收藏💖关注🤞

关注
打赏
1653536888
查看更多评论
广告位
立即登录/注册

微信扫码登录

0.5441s