Promise学习基础学习 promise封装fs模块、AJAX请求

news2024/11/16 9:32:09

Promise 是什么？

抽象表达：
1、Promise 是一门新的技术（ES6规范）
2、Promise 是JS中进行异步编程的新解决方案
备注：旧方案是单纯使用回调函数

具体表达：
1、从语法上来说：Promise 是一个构造函数
2、从功能上来说：promise对象用来封装一个异步操作并可以获取其成功/失败的结果值

异步编程

1、fs 文件操作

require('fs').readFile('./index.html',(err,data)=>{

})

2、数据库操作
3、AJAX 网络请求

$.get('/server',(data){

})

4、定时器 （setTimeout）

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

1、旧的：必须在启动异步任务前指定
2、promise：启动异步任务=>返回promise对象=>给promise对象绑定回调函数（甚至可以在异步任务结束后指定/多个）

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

1、什么是回调地狱？
回调函数嵌套使用，外部回调函数异步执行的结果是嵌套的回调执行的条件
2、回调地狱的特点？
不便于阅读
不便于异常处理
3、解决方案？
promise链式调用

Promise初体验

使用定时器的形式：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>promise初体验</title>
</head>

<body>
    <div class="container">
        <h2 class="page-header">Promise 初体验</h2>
        <button class="btn btn-primary" id="btn">点击抽奖</button>
    </div>

    <script>
        //生成随机数
        function rand(m, n) {
            return Math.ceil(Math.random() * (n - m + 1)) + m - 1;

        }

        //点击按钮 两秒后显示是否中奖（30概率中）
        //获取元素对象
        const btn = document.querySelector('#btn')
        //绑定单击事件
        btn.addEventListener('click', function () {
            //获取1-100的一个随机数
            setTimeout(() => {
                let n = rand(1, 100)
                if (n <= 30) {
                    alert('中奖了')
                } else {
                    alert('再接再厉')
                }
            }, 1000)


        })

    </script>

</body>

</html>

通过回调函数设置定时器 达到延迟一秒钟后弹出弹窗

通过Promise的方式：
注意：
resolve 解决 函数类型的数据
reject 拒绝 函数类型的数据

这是promise构造函数中函数参数的两个参数，它们都是函数类型的数据
当异步任务调用成功时触发resolve函数，当异步任务调用失败时触发reject函数

resolve函数调用之后会将 promise对象的状态设置为成功

then方法：用来指定回调
它有两个参数，分别时两个回调函数
如果异步请求成功就会调用第一个回调函数 反之则执行第二个回调函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>promise初体验</title>
</head>

<body>
    <div class="container">
        <h2 class="page-header">Promise 初体验</h2>
        <button class="btn btn-primary" id="btn">点击抽奖</button>
    </div>

    <script>
        //生成随机数
        function rand(m, n) {
            return Math.ceil(Math.random() * (n - m + 1)) + m - 1;

        }

        //点击按钮 两秒后显示是否中奖（30概率中）
        //获取元素对象
        const btn = document.querySelector('#btn')
        //绑定单击事件
        btn.addEventListener('click', function () {

            //promise实现
            //resolve 解决 函数类型的数据
            //reject 拒绝 函数类型的数据
            const p = new Promise((resolve, reject) => {
                //获取1-100的一个随机数
                setTimeout(() => {
                    let n = rand(1, 100)
                    if (n <= 30) {
                        resolve();  //将promise 对象的状态设置为成功
                    } else {
                        reject()
                    }
                }, 1000)

            })

            //调用then方法
            p.then(() => {
                alert('1212')
            },
                () => {
                    alert('1313')
                })


        })

    </script>

</body>

</html>

重点：
promise对象的参数是一个回调类型的参数，它有两个参数，这两个参数也是回调函数，promise对象通过then（）方法来指定成功或失败的回调函数



resolve和reject函数可以通过传递参数的形式把，需要的数据传递到then处理函数中去： 
            const p = new Promise((resolve, reject) => {
                //获取1-100的一个随机数
                setTimeout(() => {
                    let n = rand(1, 100)
                    if (n <= 30) {
                        resolve(n);  //将promise 对象的状态设置为成功
                    } else {
                        reject(n)
                    }
                }, 1000)

            })

            //调用then方法
            p.then((value) => {
                alert('中奖了 数字为：' + value)
            },
                (value) => {
                    alert('失败了 数字为：' + value)
                })


        })

then方法通过内部回调函数中的参数来接收这个数据

在这里插入图片描述

在这里插入图片描述

Promise实践练习-fs模块

回调函数的形式：

const fs = require('fs')

fs.readFile('文件路径',(err,data)=>{
    //如果出错则抛出错误
    if(err) throw err
    //输出文件内容
    console.log(data)
})

promise的形式：

//Promise的形式

let p = new Promise((resolve, reject) => {
    fs.readFile('文件路径', (err, data) => {
        //如果出错则抛出错误
        if (err) reject(err)
        //输出文件内容
        resolve(data)
    })
})

p.then((value)=>{
    console.log('value')
},
(reason)=>{
    console.log(reason)
})

Promise实践练习–AJAX操作

AJAX传统方式：

    <div class="container">
        <h2 class="page-header">Promise 封装 AJAX操作</h2>
        <button class="btn btn-primary" id="btn">点击发送ajax</button>
    </div>

    <script>
        //接口地址：https://api.apiopen.top/getJoke
        const btn = document.querySelector('#btn')
        btn.onclick = function () {
            const xhr = new XMLHttpRequest()
            xhr.open('GET', 'https://api.apiopen.top/getJoke')
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        console.log(xhr.response)
                    } else {
                        console.log(xhr.status)
                    }
                }
            }
        }

    </script>

使用Promise的方式：

    <div class="container">
        <h2 class="page-header">Promise 封装 AJAX操作</h2>
        <button class="btn btn-primary" id="btn">点击发送ajax</button>
    </div>

    <script>
        //接口地址：https://api.apiopen.top/getJoke
        const btn = document.querySelector('#btn')
        btn.onclick = function () {

            const p = new Promise((resolve, reject) => {

                const xhr = new XMLHttpRequest()
                xhr.open('GET', 'https://api.apiopen.top/getJoke')
                xhr.send();
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4) {
                        if (xhr.status >= 200 && xhr.status < 300) {
                            resolve(xhr.response)
                        } else {
                            reject(xhr.status)
                        }
                    }
                }


            })

            p.then((value) => { console.log(value) }, (reason) => { console.log(reason) })







        }

    </script>

Promise封装fs模块

function mineReadFile(path) {
    return new Promise((resolve, reject) => {
        //读取文件
        require('fs').readFile(path, (err, data) => {
            //判断
            if (err) { reject(err) }
            //成功
            resolve(data)
        })
    })
}

当封装完这个功能下次读文件的时候就可以使用这个功能：

mineReadFile('文件路径')
    .then(value => {
        console.log(value)
    }, reason => {
        console.log(reason)
    })

util.promisify方法进行response风格转化

//引入 
const util = require('util')
const fs = require('fs')

let mineReadFile = util.promisify(fs.readFile)

mineReadFile('文件路径'.then(value=>{
    console.log(value)
}))

Promise封装AJAX请求

function sendAJAX(url) {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open("GET", url);
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status >= 200 && xhr.status < 300) {
                    resolve(xhr.response)
                } else {
                    reject(xhr.status)
                }
            }
        }
    })
}

使用时：


sendAJAX('url')
    .then(value => {
        console.log(value)
    }, reason => {
        console.log(reason)
    })

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/389750.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

QML Loader（加载程序）

QML Loader（加载程序）

Loader加载器用于动态加载 QML 组件。加载程序可以加载 QML 文件&#xff08;使用 source 属性&#xff09;或组件对象&#xff08;使用 sourceComponent 属性&#xff09; 常用属性&#xff1a; active 活动asynchronous异步&#xff0c;默认为falseitem项目progress 进度so…
阅读更多...
package.json中 版本号详解

package.json中 版本号详解

1. 版本号简介 软件版本号有四部分组成&#xff1a; 第一部分&#xff1a;主版本号&#xff0c;当进行不兼容的 API 更改时&#xff0c;则升级主版本&#xff1b;第二部分&#xff1a;次版本号&#xff0c;当以向后兼容的方式添加功能时&#xff0c;则升级次版本&#xff1b;…
阅读更多...
FPGA实现SDI视频编解码 SDI接收发送，提供2套工程源码和技术支持

FPGA实现SDI视频编解码 SDI接收发送，提供2套工程源码和技术支持

目录1、前言2、设计思路和框架SDI接收SDI缓存写方式处理SDI缓存读方式处理SDI缓存的目的SDI发送3、工程1详解4、工程2详解5、上板调试验证并演示6、福利&#xff1a;工程代码的获取1、前言 FPGA实现SDI视频编解码目前有两种方案&#xff1a; 一是使用专用编解码芯片&#xff0…
阅读更多...
【玩转c++】vector讲解和模拟底层实现

【玩转c++】vector讲解和模拟底层实现

本期主题&#xff1a;vector的讲解和模拟实现博客主页&#xff1a;小峰同学分享小编的在Linux中学习到的知识和遇到的问题小编的能力有限&#xff0c;出现错误希望大家不吝赐vector的介绍及使用1.1vector的介绍vector其实就是一个数组的模板 &#xff0c;存放的数据可以改变而已…
阅读更多...
不想长大，却又期待成长

不想长大，却又期待成长

长大后的世界、 会让我觉得很陌生、很陌生、 为什么我们都要长大、 为什么要学会独立&#xff1f;甚至还恨害怕长大。. 因为没有依靠、没有安全感、 虽然我知道、总有一天我要步入这个大人的世界、 可是不想、害怕、害怕自己会受伤、 世界的变化、太快了、太快了、 成人的世…
阅读更多...
PMP项目管理项目运行环境

PMP项目管理项目运行环境

目录1 概述2 事业环境因素和组织过程资产3 组织系统3.1 概述3.2 组织治理框架3.2.1 治理框架3.2.2 项目治理3.3 管理要素3.4 组织结构类型3.4.1 组织结构类型3.4.2 项目管理办公室1 概述 项目所处的环境可能对项目的开展产生有利或不利的影响&#xff0c;这些影响的两大主要来…
阅读更多...
数据结构——链表讲解（2）

数据结构——链表讲解（2）

作者&#xff1a;几冬雪来 时间&#xff1a;2023年3月5日 内容&#xff1a;数据结构链表讲解 目录 前言&#xff1a; 剩余的链表应用&#xff1a; 1.查找&#xff1a; 2.改写数据&#xff1a; 3.在pos之前插入数据&#xff1a; 4.pos位置删除&#xff1a; 5.在pos的后…
阅读更多...
零死角玩转stm32初级篇1-STM32如何编译和下载程序

零死角玩转stm32初级篇1-STM32如何编译和下载程序

本篇博文目录:一.程序的编译二.程序的下载1.ISP方式2.JTAG方式3.SWD方式4.SWIM方式一.程序的编译 Keil uVision5 工具中有四个编译如图&#xff0c;他们分别表示什么意思,下面进行介绍,解释来源于<<零死角玩转stm32>>。 第一个按钮&#xff1a; Translate 就是翻译…
阅读更多...
【项目实战】Linux下安装Nginx教程

【项目实战】Linux下安装Nginx教程

一、环境准备 Linux版本&#xff1a;CentOS7 64位 二、具体步骤 2.1 步骤1&#xff1a;确认系统中安装以下基础依赖 确认系统中安装了gcc、pcre-devel、zlib-devel、openssl-devel。 在安装Nginx前首先要确认系统中安装了gcc、pcre-devel、zlib-devel、openssl-devel。 yu…
阅读更多...
Feature interation—— Bridge、Fusion、Filte

Feature interation—— Bridge、Fusion、Filte

Feature interation&#xff08;特征交互&#xff09;&#xff1a;物品不同模态的表示属于不同的语义空间&#xff0c;并且每个用户对模态也有不同的偏好。因此&#xff0c;多模态推荐系统&#xff08;MRS&#xff09;寻求融合和交互多模态特征来生成用户和物品的特征表示。特征…
阅读更多...
STM32开发（六）STM32F103 通信 —— RS485 Modbus通信编程详解

STM32开发（六）STM32F103 通信 —— RS485 Modbus通信编程详解

文章目录一、基础知识点二、开发环境三、STM32CubeMX相关配置1、STM32CubeMX基本配置2、STM32CubeMX RS485 相关配置四、Vscode代码讲解五、结果演示以及报文解析一、基础知识点 了解 RS485 Modbus协议技术 。本实验是基于STM32F103开发 实现 通过RS-485实现modbus协议。 准备…
阅读更多...
DJ1-1 计算机网络和因特网

DJ1-1 计算机网络和因特网

目录 一、计算机网络 二、Interent 1. Internet 的介绍 2. Internet 的具体构成 3. Internet 提供的服务 4. Internet 的通信控制 一、计算机网络 定义&#xff1a;是指两台以上具有独立操作系统的计算机通过某些介质连接成的相互共享软硬件资源的集合体。 计算机网络向…
阅读更多...
Python机器学习17——极限学习机(ELM)

Python机器学习17——极限学习机(ELM)

本系列基本不讲数学原理&#xff0c;只从代码角度去让读者们利用最简洁的Python代码实现机器学习方法。 背景&#xff1a; 极限学习机(ELM)也是学术界常用的一种机器学习算法&#xff0c;严格来说它应该属于神经网络&#xff0c;应该属于深度学习栏目&#xff0c;但是我这里把它…
阅读更多...
C/C++开发，无可避免的多线程（篇四）.线程与函数的奇妙碰撞

C/C++开发，无可避免的多线程（篇四）.线程与函数的奇妙碰撞

一、函数、函数指针及函数对象 1.1 函数 函数&#xff08;function&#xff09;是把一个语句序列&#xff08;函数体, function body&#xff09;关联到一个名字和零或更多个函数形参&#xff08;function parameter&#xff09;的列表的 C 实体&#xff0c;可以通过返回或者抛…
阅读更多...
MongoDB分片教程

MongoDB分片教程

一、概述分片是一种将数据分布在多个 机器。MongoDB使用分片来支持具有非常大数据的部署 集和高吞吐量操作。具有大型数据集或高吞吐量应用程序的数据库系统可以 挑战单个服务器的容量。例如&#xff0c;高查询率可以 耗尽服务器的 CPU 容量。工作集大小大于 系统的 RAM 会给磁…
阅读更多...
初学者的第一个Linux驱动

初学者的第一个Linux驱动

软件环境&#xff1a;Ubuntu20.04 Linux内核源码&#xff1a;3.4.39 硬件环境&#xff1a;GEC6818 什么是驱动&#xff1f;简单来说就是让硬件工作起来的程序代码。 Linux驱动模块加载有两种方式&#xff1a; 1、把写好的驱动代码直接编译进内核。 2、把写好的驱动代码编…
阅读更多...
Linux24 -- tcp相关概念、多个客户端链接服务端代码

Linux24 -- tcp相关概念、多个客户端链接服务端代码

一、tcp相关概念 tcp协议特点&#xff1a;面向连接的、可靠的、流式服务 建立链接&#xff1a;三次握手&#xff0c;发送 SYN 断开链接&#xff1b;四次挥手&#xff0c;发送 FIN tcp、udp都同属于传输层&#xff0c;在网络层使用ip协议&#xff0c;都要将数据交给IP协议&am…
阅读更多...
零拷贝技术-内核源码剖析

零拷贝技术-内核源码剖析

在网络编程中&#xff0c;如果我们想要提供文件传输的功能&#xff0c;最简单的方法就是用read将数据从磁盘上的文件中读取出来&#xff0c;再将其用write写入到socket中&#xff0c;通过网络协议发送给客户端。ssize_t read(int fd, void *buf, size_t count); ssize_t write(…
阅读更多...
学习记录---latent code 潜在编码

学习记录---latent code 潜在编码

文章目录参考文献1. 什么是潜在编码&#xff1f;2.什么是潜在空间&#xff1f;3.同类潜在编码的相似性4.潜在编码的应用4.1 Antoencoders4.2 Generative models5.结论个人学习总结&#xff0c;持续更新中……参考文献 [1] 快速理解深度学习中的latent code潜在编码 1. 什么是…
阅读更多...
[一篇读懂]C语言十一讲：单链表的删除和单链表真题实战

[一篇读懂]C语言十一讲：单链表的删除和单链表真题实战

[一篇读懂]C语言十一讲&#xff1a;单链表的删除和单链表真题实战1. 与408关联解析及本节内容介绍1 本节内容介绍2. 单链表的删除操作实战3. 单链表真题解读与解题设计1 题目解读2 解题设计第一阶段&#xff1a;双指针找中间结点第二阶段&#xff1a;原地逆置第三阶段&#xff…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023