<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Promise对象</title>

</head>

<body>

    <script src="./jquery-3.2.1.min.js"></script>

    <script>

        /*基础结构*/

        // const promise = new Promise(function(resolve, reject) {

        //     // ... some code

        //     if (/* 异步操作成功 */){

        //         resolve(value);

        //     } else {

        //         reject(error);

        //     }

        // });

        // promise.then(function(value) {

        //     // success

        // }).catch(function(error){

        //     // failure

        // });

        /*加载图片*/

        // let url = `http://img.365jia.cn/uploads/news/folder_1230109/images/.662ba73c54c07708125743075da95466t2048l90.jpg`;

        // function loadImgUrl(url){

        //     return new Promise((resolve,reject) => {

        //         const imgUrl = new Image();

        //         imgUrl.onload = function(){

        //             return resolve(imgUrl);

        //         }

        //         imgUrl.onerror = function(){

        //             return reject(new Error('不能加载该地址图片' + url));

        //         }

        //         imgUrl.src = url;

        //     });

        // }

        // loadImgUrl(url).then((res) => {

        //     console.log(res);

        // }).catch((error) => {

        //     console.log(error);

        // });

        /*ajax封装*/

        // const getAjax = (option) => {

        //     return new Promise((resolve,reject) => {

        //         $.ajax({

        //             url:option.url,

        //             type:option.methods,

        //             success:(res) => {

        //                 resolve(res)

        //             },

        //             fail:(error) => {

        //                 reject(error)

        //             }

        //         });

        //     });

        // } 

        // let option = {

        //     url:`https://www.easy-mock.com/mock/5b62549fbf26d2748cff3cf4/dashuju/visualize`,

        //     methods:'GET'

        // }

        // let g1 = getAjax(option).then((res) => {

        //     console.log(res);

        // }).catch((error) => {

        //     console.log(error);

        // });

        /*一个异步操作的结果是返回另一个异步操作*/

        // let g2 = new Promise((resolve,reject) => {

        //     resolve(g1);//这里把g1对象作为参数

        // });

        // g2.then(() => {//then要等g1执行完成之后才能执行

        //     console.log(111);

        // });

        /*finally方法用于指定不管 Promise 对象最后状态如何，都会执行的操作。该方法是 ES2018 引入标准的*/

        // promise .then(result => {···}).catch(error => {···}).finally(() => {···});        

        /*Promise.all方法用于将多个 Promise 实例，包装成一个新的 Promise 实例*/

        // const pResolve = Promise.all([p1, p2, p3]);//只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数

        // const pReject = Promise.all([p1, p2, p3]);//只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数

        // // 生成一个Promise对象的数组

        // const promises = [2, 3, 5, 7, 11, 13].map(function (id) {

        //     return getJSON('/post/' + id + ".json");

        // });

        // Promise.all(promises).then(function (posts) {

        //     // ...

        // }).catch(function(reason){

        //     // ...

        // });//promises是包含 6 个 Promise 实例的数组，只有这 6 个实例的状态都变成fulfilled，或者其中有一个变为rejected，才会调用Promise.all方法后面的回调函数

        /*Promise.race方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例*/

        // const p = Promise.race([p1, p2, p3]);//只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数

        /*对象转为 Promise 对象，Promise.resolve方法*/

        // Promise.resolve('foo')

        // // 等价于

        // new Promise(resolve => resolve('foo'))

        /*

        （1）参数是一个 Promise 实例，如果参数是 Promise 实例，那么Promise.resolve将不做任何修改、原封不动地返回这个实例。

        （2）参数是一个thenable对象，thenable对象指的是具有then方法的对象

            let thenable = {

                then: function(resolve, reject) {

                    resolve(42);

                }

            };

            let p1 = Promise.resolve(thenable);

                p1.then(function(value) {

                console.log(value);  // 42

            });

        （3）参数不是具有then方法的对象，或根本就不是对象

            const p = Promise.resolve('Hello');

            p.then(function (s){

                console.log(s)// Hello

            });

        （4）不带有任何参数

            const p = Promise.resolve();

            p.then(function () {

                // ...

            });

        */        

    </script>

</body>

</html>

备注：文中多数内容摘自阮一峰老师文章，仅供自我学习查阅。

ES6基础知识（Promise 对象）的更多相关文章

  1. es6中的promise对象

    Promise是异步里面的一种解决方案,解决了回调嵌套的问题,es6将其进行了语言标准,同意了用法,提供了`promise`对象, promise对象有三种状态:pending(进行中) .Resol ...

  2. es6学习笔记--promise对象

    Promise对象是为了简化异步编程.解决回调地狱情况 Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果.从语法上说,Promise 是一个对象,从它可 ...

  3. es6基础知识

    1.超引用:(...) 用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中 function fun(...args){ console.log(args); //[1,2,3,4,5,6] ar ...

  4. Nodejs与ES6系列2:Promise对象

    2.promise对象 js单线程异步执行的特性,因此在代码中充斥着回调函数.随着回调函数的增加,代码的可读性会愈来愈差,因此引入promise对象是不错的一种选择,可以避免层层回调函数.在ECMA6 ...

  5. ES6入门之Promise对象

    1. Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案--回调函数和事件更合理.更强大. 1.1 什么是Promise 简单来说就是一个容器,里面保存着某个未来才会结 ...

  6. ES6基础知识（async 函数）

    1.async 函数是什么?一句话,它就是 Generator 函数的语法糖. const fs = require('fs'); const readFile = function (fileNam ...

  7. ES6基础知识（Reflect）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. ES6 基础知识

    let:用来定义变量特点:只能在代码块里面使用,let拥有块级作用域;并且let不允许重复声明; 比如: var a = 12; var a = 5; alert(a); //5; let a = 1 ...

  9. ES6基础三（对象）

    对象赋值 在es6中,可以直接将声明的变量赋值给对象:     Object.keys().Object.values()和Object.entries() 在ES6中,允许我们使用变量作为对象的ke ...

随机推荐

  1. WPF进阶技巧和实战07--自定义元素01

    完善和扩展标准控件的方法: 样式:可使用样式方便地重用控件属性的集合,甚至可以使用触发器应用效果 内容控件:所有继承自ContentControl类的控件都支持嵌套的内容.使用内容控件,可以快速创建聚 ...

  2. 腾讯首个CNCF沙箱开源项目

    作者 SuperEdge开发者.腾讯云容器产品中心边缘计算团队.腾讯开源生态管理协会 SuperEdge 进入 CNCF 沙箱 2021 年 9 月 14 日,云原生分布式边缘容器系统 SuperEd ...

  3. The art of multipropcessor programming 读书笔记-硬件基础2

    本系列是 The art of multipropcessor programming 的读书笔记,在原版图书的基础上,结合 OpenJDK 11 以上的版本的代码进行理解和实现.并根据个人的查资料以 ...

  4. C语言实现简易计算器(可作加减乘除)

    C语言实现简易计算器(加减乘除) 计算器作为课设项目,已完成答辩,先将代码和思路(注释中)上传一篇博客 已增添.修改.整理至无错且可正常运行 虽使用了栈,但初学者可在初步了解栈和结构语法后理解代码 # ...

  5. java课堂测试2第一阶段：方法运用

    package test2; import java.util.*; public class Test2 { public static int generateRandom(int fanwei) ...

  6. 洛谷3769[CH弱省胡策R2]TATT (KDTree)(四维LIS)

    真是一个自闭的题目(调了一个上午+大半个下午) 从\(WA\)到\(WA+TLE\)到\(TLE\)到\(AC\) 真的艰辛. 首先,这个题,我们可以考虑直接上四维KDTree来解决. 对于kdtre ...

  7. JavaScript表单输入合法控制

    写在前面 为了提高数据输入的容错性和数据库数据的安全性,除了后端对输入的数据的逻辑判断处理,还可以前端页面高效率处理,从而提高系统的可靠性,下面是这次项目中的自己写的一些符合当时需要的控制. 账号位数 ...

  8. Vue3学习（六）之使用Vue3进行数据绑定及显示列表数据

    一.写在前面 说来还是比较惭愧的,从周二开始事就比较多,周三还电脑坏了,然后修电脑等等一些杂事,忙的团团转,因为周二.周三自己走的过多了,导致不敢直腰,周四卧床一天. 之前都听说<陈情令> ...

  9. vue3.x全局$toast、$message、$loading等js插件

    有时候我们需要使用一些类似toast,messge.loading这些跟js交互很频繁的插件,vue3.x这类插件的定义跟vue2.x插件稍大,而且相对变得复杂了一点点. 第一种.需要时创建,用完移除 ...

  10. cs224n 2019

    视频链接 相关资源 Notes 笔记下载 笔记2 需要挂梯子,不然不显示图片,如果用ssr,要调到全局模式 转自:bitJoy CS224N(1.8)introduction and Word Vec ...