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

最新推荐文章于 2024-09-02 07:50:54 发布
最新推荐文章于 2024-09-02 07:50:54 发布
阅读量583 收藏
点赞数
文章标签： 学习 ajax javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fuhao6363/article/details/129345325
版权
Promise是ES6中用于异步编程的新工具，解决了旧的回调函数导致的回调地狱问题。它是一个构造函数，创建Promise对象来封装异步操作。Promise支持链式调用，使得异步任务的管理和错误处理更加优雅。文中通过定时器、fs文件操作和AJAX请求的例子展示了Promise的使用和封装技巧，包括利用util.promisify方法转换回调风格的API。
摘要由CSDN通过智能技术生成

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)
    })
冲鸭嘟嘟可
关注
【学习笔记】Axios、Promise
Eddie_hyh的博客
05-29 1346
Axios、Promise
promise专题01-初体验，promise传值到then中，封装文件操作，封装ajax，用一个函数封装promise，util.promisify，promise对象状态改变
weixin_43745804的博客
10-14 943
1、promise初体验 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="js/jquery.js"></script> <title>Title</title> </head> <body> <button id="awards">抽奖</button&g
Promise实践练习-fs文件操作
yrfjygb的博客
02-19 168
promise实践练习-fs文件操作 前提：需要node的环境 代码： //promise文件操作 // 导入fs模块 const fs = require('fs'); // 导入path模块 const path = require('path') // 打印a.txt的绝对路径 console.log(path.join(__dirname,'a.txt')); // 使用promise操作fs文件 let p = new Promise((reslove,reject)=&
fs.promise模块
jiaoqi6132的博客
02-05 9329
我研究一个块的思路很简单.先看类,到底是从外到内,还是从外到内,再在内部循环. 开始先一个程序根据类,类内部的属性,方法,外部的方法.这样的结合可以 fs 的 Promise API fs.promisesAPI 提供了一组备用的异步文件系统的方法，它们返回Promise对象而不是使用回调。 API 可通过require('fs').promises访问。 Fi...
fs-promise 项目使用教程
最新发布
gitblog_00380的博客
09-02 306
fs-promise 项目使用教程 fs-promise[DEPRECATED] Use mz or fs-extra^3 with Promise support项目地址:https://gitcode.com/gh_mirrors/fs/fs-promise 1. 项目的目录结构及介绍 fs-promise/ ├── LICENSE ├── README.md ├── package.jso...
Promise封装练习——fs模块（Promise初级）
weixin_51747462的博客
09-05 474
用Promise形式进行异步编程，替代原始回调函数形式异步编程；promise封装练习-fs模块
Promise（一）介绍、fs读取文件、AJAX请求
qq_45764317的博客
11-19 379
学ajax和es6时对promise一知半解的，所有系统学习一下
fs/promises 问题，降低 npm 版本
qq_34212381的博客
01-02 559
fs/promises 问题，降低 npm 版本
Axios请求（对ajax的二次封装）——Axios API、Axios实例、请求配置、Axios响应结构
XSL_HR的博客
04-14 1502
一篇文章带你学会axios请求——Axios API、Axios实例、请求配置、Axios响应结构
promise、async、await学习
qq_44872688的博客
03-10 1223
文章目录前言一、Promise 的理解和使用1、Promise 是什么?（1）理解（2）promise 的状态改变（3）promise 的基本流程（4）promise 的基本使用①基本编码流程②使用 promise 封装基于定时器的异步③使用 promise 封装 ajax 异步请求2、为什么要用 Promise（1）指定回调函数的方式更加灵活（2）支持链式调用, 可以解决回调地狱问题① 什么是回调地狱②回调地狱的缺点③解决方案④终极解决方案3、如何使用 Promise（1） API2、promise 的几
Promise入门到精通
qq_63533863的博客
05-14 1210
1.1 Promise 是什么？ 1.1.1 理解 1.抽象表达 1）promise是一门新的技术（ES6规范） 2）Promise是JS钟进行异步编程的新的解决方案（旧的：callback） 异步编程： fs文件操作，数据库操作，AJAX，定时器 2.具体表达： 1）从语法上来说：Promise是一个构造函数 2）从功能上来说：Promise对象用来封装一个异步操作并可以获取成功/失败的结果值 1.2 为什么要用Promise？ 1.2.1 指定回调函数的方式更加灵活 promis
基于Promise封装Ajax请求
m0_60899441的博客
11-01 498
大佬: 能用，以上代码有点臃肿，不易维护，如果请求地址是同一个，请求方式不同，我们每次都写一遍，大大增加了劳动力，缩短了在世界存活的时间。大佬：当然可以，以上代码看起来已经客服了代码臃肿，重复的弊端，但是还有一个弊端就是如果有多个回调函数处理时，就陷入了一种回调地狱的状态。面试官经常会让手写一个promise封装，直接写出一个请求分装即可，最具代表性。额外问题2：为什么要选择Promise进行封装呢？额外问题1：为什么要封装Ajax,难道不封装就不能用吗？利用上述的Promise，问题就得到了最好的解决！
使用promise封装Ajax网络请求
Hdmi764287459的博客
08-22 122
以上是通过promise封装网络请求实例，在今后前后端交互网络请求中我们会用的非常多希望大家多理解掌握封装思想，会大大减少我们代码的重复量，更好维护；
javaScript 用Promise封装Ajax请求
平安喜乐
03-26 326
【代码】javaScript 用Promise封装Ajax请求。
使用Promise封装Ajax请求，实现前后端交互
m0_57887428的博客
06-28 512
使用Promise封装Ajax请求，实现前后端交互
关于electron打包报错require(“fs/promise“) 问题
baidu_40294156的博客
01-05 1876
关于electron打包之后闪退，报错fs/promises的问题
cnpm错误：“Error：Cannot find module ‘fs/promises”
热门推荐
qq_34617629的博客
07-29 1万+
cnpm错误：“Error：Cannot find module 'fs/promises”
promise 版 ajax 封装
lianlian_0_1的博客
05-12 110
promise版本的原生 ajax 封装
利用promise对ajax进行基本的封装
qq_36566924的博客
03-05 514
//传参：1.url 2.type 3.data--如果type为POST时进行的传参 //.then方法进行成功后进行的操作,.catch方法里面进行失败后的方法 let globalAjax=function(url,type,data){ return new Promise((resolve,reject)=>{ ...
promise封装ajax请求
07-28
可以使用 Promise 来封装 AJAX 请求。下面是一个示例： ```javascript function request(url, method, data) { return new Promise(function(resolve, reject) { var xhr = new XMLHttpRequest(); xhr.open...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

冲鸭嘟嘟可

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值