首页 专区 Skill 文章 专题 AI工具 学习 编程手册

PHP MySQL jquery HTML CSS
首页 > web前端 > js教程

ES6中Promise的基本用法介绍

酷敏同学_4827

酷敏同学_4827

2018-10-29

4400人浏览

转载

本篇文章给大家带来的内容是关于es6中promise的基本用法介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

Promise是一种异步编程的解决方案

1.es5的回调

{
    let ajax = function (callback) {
        console.log('run1');
        setTimeout(function () {
            callback && callback.call();
        }, 1000);
    };
    ajax(function () {
        console.log('timeout1');
    });
    // 结果：立马输出 run1，1秒之后输出 timeout1
    // 1.如果过程变得复杂，a()=>b()=>c()=>d()... ，用回调来处理会使代码变得复杂
    // 2.代码复杂影响后期维护，很难一眼看出回调之间的顺序问题，代码难以阅读
}

2.es6的Promise

{
    let ajax = function () {
        console.log('run2');
        // 返回一个对象（Promise实例），这个实例具有then()方法，就是执行下一步的功能
        return new Promise(function (resolve, reject) {
            // resolve表示执行下一步操作 reject表示中断当前操作
            setTimeout(function () {
                resolve();
            }, 1000);
        });
    };
    ajax().then(function () {
        // 这个方法对应resolve
        console.log('timeout2');
    }, function () {
        // 这个方法对应reject
    });
    // 结果：立马输出 run2，1秒之后输出 timeout2
    // 结果和es5一样，但是代码可读性、可维护性更高
}

3.then()的串联操作

{
    let ajax = function () {
        console.log('run3');
        return new Promise(function (resolve, reject) {
            setTimeout(function () {
                resolve();
            }, 2000);
        });
    };
    ajax().then(function () {
        // 返回Promise实例，通过不断的下一步下一步，实现了串联操作的结果
        return new Promise(function (resolve, reject) {
            setTimeout(function () {
                resolve();
            }, 3000);
        });
    }).then(function () {
        console.log('timeout3');
    });
    // 结果：立马输出 run3，5秒之后输出 timeout3
}

4.catch方法

{
    let ajax = function (num) {
        console.log('run4');
        return new Promise(function (resolve, reject) {
            if (num >= 5) {
                resolve();
            } else {
                throw Error(`出错了，${num}小于5`);
            }
        });
    };

    // catch方法用来捕获异常
    ajax(6).then(function () {
        console.log(6);
    }).catch(function (err) {
        console.log(err);
    });
    // 结果：输出 run4 6

    ajax(3).then(function () {
        console.log(3);
    }).catch(function (err) {
        console.log(err);
    });
    // 结果：输出 run4  Error: 出错了，3小于5
}

Promise.all()

例子：所有图片加载完再统一添加到页面

{
    function loadImg(src) {
        return new Promise((resolve, reject) => {
            let img = document.createElement('img');
            img.src = src;
            // onload监听图片加载完成
            img.onload = function () {
                resolve(img);
            };
            // onerror监听图片加载失败
            img.onerror = function (err) {
                reject(err);
            };
        });
    }
    function showImgs(imgs) {
        console.log(imgs); // [img, img, img] 三个img对象
        imgs.forEach(function (img) {
            document.body.appendChild(img);
        });
    }
    // Promise.all 把多个Promise实例当做一个Promise实例
    // Promise.all(array).then(fn),array对应多个Promise实例，当所有实例状态发生改变时，新的Promise实例才会跟着发生变化
    // Promise.all也是返回Promise实例，所以也有.then()方法
    // 当三张图片都加载完成，才会执行showImgs，如果其中有图片正在加载，不会执行showImgs，页面上看不到任何一张图片
    Promise.all([
        loadImg('https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2530513100.webp'),
        loadImg('https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2529571873.webp'),
        loadImg('https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2395733377.webp')
    ]).then(showImgs);
}

Promise.race()

例子：有一个图片加载完就添加到页面，其余的不管，只显示最先加载完成的一张图片

{
    function loadImg(src) {
        return new Promise((resolve, reject) => {
            let img = document.createElement('img');
            img.src = src;
            // onload监听图片加载完成
            img.onload = function () {
                resolve(img);
            };
            // onerror监听图片加载失败
            img.onerror = function (err) {
                reject(err);
            };
        });
    }
    function showImgs(img) {
        let p = document.createElement('p');
        p.appendChild(img);
        document.body.appendChild(p);
    }
    // 当某一张图片率先加载完成，执行showImgs显示这张图片，剩余图片不再响应
    Promise.race([
        loadImg('https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2530513100.webp'),
        loadImg('https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2529571873.webp'),
        loadImg('https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2395733377.webp')
    ]).then(showImgs);
}

                                               

  1. 专栏

  2. 超级有温度的代码

  3. 文章详情








ican                                                

ican                                                                                                26                                                                                                发布于                                                超级有温度的代码                                                                                                                                                                                                

                                                   1 天前发布                                                                                            

【ES6入门12】：Promise

                                               19 次阅读                                                 ·                                                 读完需要 15 分钟                                                                                    

前端设计-专业版
前端设计-专业版

企业级前端设计工具,支持设计系统生成、组件库批量产出、多端适配,适配商业产品开发。

下载



                           0                        

                                                                                                                                           

Promise基本用法

Promise是一种异步编程的解决方案

1.es5的回调

{
    let ajax = function (callback) {
        console.log('run1');
        setTimeout(function () {
            callback && callback.call();
        }, 1000);
    };
    ajax(function () {
        console.log('timeout1');
    });
    // 结果：立马输出 run1，1秒之后输出 timeout1
    // 1.如果过程变得复杂，a()=>b()=>c()=>d()... ，用回调来处理会使代码变得复杂
    // 2.代码复杂影响后期维护，很难一眼看出回调之间的顺序问题，代码难以阅读
}

2.es6的Promise

{
    let ajax = function () {
        console.log('run2');
        // 返回一个对象（Promise实例），这个实例具有then()方法，就是执行下一步的功能
        return new Promise(function (resolve, reject) {
            // resolve表示执行下一步操作 reject表示中断当前操作
            setTimeout(function () {
                resolve();
            }, 1000);
        });
    };
    ajax().then(function () {
        // 这个方法对应resolve
        console.log('timeout2');
    }, function () {
        // 这个方法对应reject
    });
    // 结果：立马输出 run2，1秒之后输出 timeout2
    // 结果和es5一样，但是代码可读性、可维护性更高
}

3.then()的串联操作

{
    let ajax = function () {
        console.log('run3');
        return new Promise(function (resolve, reject) {
            setTimeout(function () {
                resolve();
            }, 2000);
        });
    };
    ajax().then(function () {
        // 返回Promise实例，通过不断的下一步下一步，实现了串联操作的结果
        return new Promise(function (resolve, reject) {
            setTimeout(function () {
                resolve();
            }, 3000);
        });
    }).then(function () {
        console.log('timeout3');
    });
    // 结果：立马输出 run3，5秒之后输出 timeout3
}

4.catch方法

{
    let ajax = function (num) {
        console.log('run4');
        return new Promise(function (resolve, reject) {
            if (num >= 5) {
                resolve();
            } else {
                throw Error(`出错了，${num}小于5`);
            }
        });
    };

    // catch方法用来捕获异常
    ajax(6).then(function () {
        console.log(6);
    }).catch(function (err) {
        console.log(err);
    });
    // 结果：输出 run4 6

    ajax(3).then(function () {
        console.log(3);
    }).catch(function (err) {
        console.log(err);
    });
    // 结果：输出 run4  Error: 出错了，3小于5
}

Promise.all()

例子：所有图片加载完再统一添加到页面

{
    function loadImg(src) {
        return new Promise((resolve, reject) => {
            let img = document.createElement('img');
            img.src = src;
            // onload监听图片加载完成
            img.onload = function () {
                resolve(img);
            };
            // onerror监听图片加载失败
            img.onerror = function (err) {
                reject(err);
            };
        });
    }
    function showImgs(imgs) {
        console.log(imgs); // [img, img, img] 三个img对象
        imgs.forEach(function (img) {
            document.body.appendChild(img);
        });
    }
    // Promise.all 把多个Promise实例当做一个Promise实例
    // Promise.all(array).then(fn),array对应多个Promise实例，当所有实例状态发生改变时，新的Promise实例才会跟着发生变化
    // Promise.all也是返回Promise实例，所以也有.then()方法
    // 当三张图片都加载完成，才会执行showImgs，如果其中有图片正在加载，不会执行showImgs，页面上看不到任何一张图片
    Promise.all([
        loadImg('https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2530513100.webp'),
        loadImg('https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2529571873.webp'),
        loadImg('https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2395733377.webp')
    ]).then(showImgs);
}

Promise.race()

例子：有一个图片加载完就添加到页面，其余的不管，只显示最先加载完成的一张图片

{
    function loadImg(src) {
        return new Promise((resolve, reject) => {
            let img = document.createElement('img');
            img.src = src;
            // onload监听图片加载完成
            img.onload = function () {
                resolve(img);
            };
            // onerror监听图片加载失败
            img.onerror = function (err) {
                reject(err);
            };
        });
    }
    function showImgs(img) {
        let p = document.createElement('p');
        p.appendChild(img);
        document.body.appendChild(p);
    }
    // 当某一张图片率先加载完成，执行showImgs显示这张图片，剩余图片不再响应
    Promise.race([
        loadImg('https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2530513100.webp'),
        loadImg('https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2529571873.webp'),
        loadImg('https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2395733377.webp')
    ]).then(showImgs);
}

               

    • 举报


你可能感兴趣的



评论                                                    

默认排序                        时间排序



载入中...

显示更多评论


相关文章

如何通过 Google Docs API 按标题层级精准提取文档段落内容

如何正确从类方法中返回值

TypeScript 泛型技巧：通过三元泛型实现联合键类型推导

如何在网页中复用同一个下拉选择框元素

如何在网页中复用同一 HTML 元素（如下拉框）多次而不重复编写代码
PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习？PHP怎么入门？PHP在哪学？PHP怎么学才快？不用担心，这里为大家提供了PHP速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载

相关标签:

javascript es6 前端

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：ES6中Iterator接口的代码示例讲解

下一篇：javascript如何实现不重载页面的前提下创建一条历史纪录（代码）

作者最新文章

Cookie和Session的区别总结

JavaScript中function的详细理解（附代码）

如何使用nodejs分离html文件里的js和css（代码示例）

Content-Type几种值的区别及用法介绍

JavaScript中的强制类型转换的方法介绍

使用webpack构建多页应用的代码示例

JavaScript异步加载的详细介绍（附代码）

new操作符的详细用法介绍

JavaScript常用数组的操作方法总结（代码）

节流阀和去抖动的基本实现方法介绍

热门AI工具

更多
火山引擎

火山引擎

Hot 立刻MV

立刻MV

Hot DeepSeek

DeepSeek

 超级简历WonderCV

超级简历WonderCV

Hot 豆包大模型

豆包大模型

 二狗PPT

二狗PPT

Hot Laper

Laper

Hot 墨刀AI

墨刀AI

Hot

相关专题

更多
es6新特性
es6新特性

es6新特性有：1、块级作用域变量；2、箭头函数；3、模板字符串；4、解构赋值；5、默认参数；6、 扩展运算符；7、 类和继承；8、Promise。本专题为大家提供es6新特性的相关的文章、下载、课程内容，供大家免费下载体验。

2023.07.17

285

5

es6新特性有哪些
es6新特性有哪些

es6的新特性有：1、块级作用域；2、箭头函数；3、解构赋值；4、默认参数；5、扩展运算符；6、模板字符串；7、类和模块；8、迭代器和生成器；9、Promise对象；10、模块化导入和导出等等。本专题为大家提供es6新特性的相关的文章、下载、课程内容，供大家免费下载体验。

2023.08.04

406

5

JavaScript ES6新特性
JavaScript ES6新特性

ES6是JavaScript的根本性升级，引入let/const实现块级作用域、箭头函数解决this绑定问题、解构赋值与模板字符串简化数据处理、对象简写与模块化提升代码可读性与组织性。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。

2025.12.24

395

12

promise的用法
promise的用法

“promise” 是一种用于处理异步操作的编程概念，它可以用来表示一个异步操作的最终结果。Promise 对象有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。Promise的用法主要包括构造函数、实例方法（then、catch、finally）和状态转换。

2023.10.12

4680

6

html文本框类型介绍
html文本框类型介绍

html文本框类型有单行文本框、密码文本框、数字文本框、日期文本框、时间文本框、文件上传文本框、多行文本框等等。详细介绍：1、单行文本框是最常见的文本框类型，用于接受单行文本输入，用户可以在文本框中输入任意文本，例如用户名、密码、电子邮件地址等；2、密码文本框用于接受密码输入，用户在输入密码时，文本框中的内容会被隐藏，以保护用户的隐私；3、数字文本框等等。

2023.10.12

4383

6

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章，帮助读者完成上线流程。

2026.10.28

80

16

Vite 如何搭配 Vue.js
Vite 如何搭配 Vue.js

Vite搭配Vue.js专题汇集创建Vue 3项目、配置开发环境、路径别名、Vue插件、代理、多环境构建与调试的已审核文章，帮助读者完成从初始化到日常开发的配置。

2026.10.28

60

15

Vite 项目目录怎么看
Vite 项目目录怎么看

Vite项目目录专题汇集入口文件、src源码、public静态资源、路径别名、项目根目录和构建输出目录相关的已审核文章，帮助读者理解各文件夹的用途与引用方式。

2026.10.28

220

10

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程，涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法，帮助你理解插件如何组织构建逻辑，减少多个项目之间的重复配置。

2026.10.22

140

11

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

相关下载

更多
MDPHP(麦迪php框架系统)1.1
PHP 多国语言框架2.0
ujframe简单快速PHP开发框架1.0
php轻量型框架1.0
MyQEE开源PHP多项目及模块化开发框架3.0 RC2
php开源学习型框架CMVC1.2.0
PHP框架Kohana3.3.1

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.4万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.8万人学习

最新文章

更多
如何通过 Google Docs API 按标题层级精准提取文档段落内容
如何正确从类方法中返回值
TypeScript 泛型技巧：通过三元泛型实现联合键类型推导
如何在 React 中动态控制滚动事件监听与禁用滚动行为
如何在 Bootstrap 选项卡中精准跳转到锚点元素（如表单）
如何正确集成 particle.js 实现背景粒子动画
Plotly.js 散点图为空？正确构建 trace 数组是关键
Plotly.js 散点图为空？正确构建 trace 数据结构是关键
如何通过点击链接动态加载外部HTML文件并插入指定容器
如何在浏览器中高效显示拖放的图像文件（避免Base64编码开销）