【Promise】第一部分介绍Promise

原创已于 2022-08-11 15:30:05 修改 · 220 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #es6 #promise

于 2022-04-05 00:57:04 首次发布

Promise 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了Promise在JavaScript中的概念、使用场景，包括解决回调地狱、封装Ajax请求及文件读取，还展示了如何利用util.promisify简化回调函数。通过实例演示了Promise的链式调用和错误处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【Promise】第一部分介绍Promise

1. 介绍Promise

1.1 什么是Promise?

抽象表达: Promise 是一门新的技术(ES6 规范),Promise 是 JS 中进行异步编程的新解决方案.
具体表达:

从语法上来说: Promise 是一个构造函数;

从功能上来说: promise 对象用来封装一个异步操作并可以获取其成功/ 失败的结果值.

1.2 为什么要使用Promise?

指定回调函数的方式更加灵活
支持链式调用,可以解决回调地狱问题

什么是回调地狱?

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

在这里插入图片描述

1.3 怎么使用Promise?

举几个例子：

第一个例子 需求是: 点击按钮,1s后弹窗是否中奖(中奖的概率是30%)

<body>
    <h2>Promise 抽奖</h2>
    <hr>
    <button>点击我进行抽奖</button>

    <script>
        const btn = document.querySelector('button')
        function random (max,min){
            return Math.floor(Math.random()*(max-min+1)+min)
        }
        btn.addEventListener('click',()=>{
            /* 
                resolve 成功
                reject  失败
            */
          // 创建一个实例化对象
            const p = new Promise((resolve,reject)=>{
                setTimeout(() => {
                    let n = random(1,100)
                    if(n > 30)
                    {
                        // 将Promise对象的状态设置为成功（可以传递参数）
                        resolve(n); 
                    }else{
                        // 将Promise对象的状态设置为失败（可以传递参数）
                        reject(n);       
                    }
                }, 1000);
            })
            p.then((value)=>{
                //成功的回调
                alert('很遗憾,您没有中奖!再接再厉!'+ value)
            },(reason)=>{
                //失败的回调
                alert('恭喜您,获得50W!!' + reason)
            })
        })
    </script>
</body>
</html>

第二个例子 读取文件

const fs = require('fs')

const p = new Promise((resolve, reject) => {
    fs.readFile('D:\\vs code\\Promise\\book.txt', (err, data) => {
        if (err) {
            reject(err)
        }
        resolve(data)
    })

})

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

第三个例子 发送Ajax请求

<body>
    <h2>Promise 请求</h2>
    <hr>
    <button>点击我发送请求</button>
    <script>
        const btn = document.querySelector('button')
        btn.addEventListener('click', () => {
            const p = new Promise((resolve, reject) => {
                // 创建对象
                const xhr = new XMLHttpRequest();
                // 设置响应体的类型
                xhr.responseType = 'json'
                //初始化
                xhr.open('Get', 'http://poetry.apiopen.top/sentences');
                //发送
                xhr.send();
                //处理响应的结果
                xhr.onreadystatechange = function () {

                    if (xhr.readyState === 4) {
                        //先判断响应状态码
                        if (xhr.status >= 200 && xhr.status < 300) {
                            resolve(xhr.response.result.name);
                        } else {
                            reject(xhr.status);
                        }
                    }
                }
            })
            p.then((value) => {
                console.log(value);
            }, (reason) => {
                console.log(reason);
            })
        })
    </script>
</body>

第四个例子封装Ajax请求

<!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>
    <script>
        function sendAjax(url) {
            return new Promise((resolve, reject) => {
                //创建对象
                const xhr = new XMLHttpRequest();
                //设置响应体类型
                xhr.responseType = 'json';
                //初始化
                xhr.open('Get', url);
                //发送
                xhr.send();
                //处理响应结果
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4) {
                        if (xhr.status >= 200 && xhr.status < 300) {
                            resolve(xhr.response.result.name);
                        } else {
                            resject(xhr.status);
                        }
                    }
                }
            })
        }

        sendAjax('http://poetry.apiopen.top/sentences').then((value) => {
            console.log(value);
        }, (reason) => {
            console.log(reason);
        })
    </script>
</body>

</html>

第五个例子 封装fs读取文件

function miniReadyFile (path){
    return new Promise((resolve,reject)=>{
        const fs = require('fs')
        fs.readFile(path,(err,data)=>{
            if(err) 
            {
                reject(err);
            }
            resolve(data)
        })
    })
}

miniReadyFile('D:/vs code/Promise/book.txt')
.then((value)=>{ 
    console.log(value.toString());
},(reason)=>{
    console.log(reason);
})

1.4 util.promisify

在这里插入图片描述

上图来着nodejs官网，简单来说：我们可以使用该模块帮助我们去封装成一个函数，当我们去调用这个函数的时候返回的是一个Promise对象，但是使用的时候有条件：需要是以错误优先的回调风格的函数.

例如：1.3 中第四个例子里的 fs (err,data)=>{}

// 导入 util
const util = require('util')

// 导入 fs
const fs = require('fs')

// 返回一个函数，调用这个函数返回的是一个promise对象
let miniReady = util.promisify(fs.readFile);

miniReady('D:/vs code/Promise/book.txt').then((value)=>{
    console.log(value.toString());
},(reason)=>{
    console.log(reason);
})