<!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. 分享一下我的Python自学历程,分享下我自己学习方法

    其实关于编程这事儿没有接触的那么早,大一的时候没什么关注点,有一门课是vb,一天天的,就抄抄作业啥的就完事儿了.当时也觉的自己不是学编程的料,想着以后估摸也不会干开发相关的工作. 我的自学历程 阴差阳 ...

  2. LaTeX Vscode 配置

    安装:https://www.latexstudio.net/archives/51801.html LaTeX 安装 & 宏包升级 & 入门:https://blog.csdn.ne ...

  3. Linux下关于用户账户的几个文件解析

    Linux下关于用户账户的几个文件解析 Linux是一个多用户系统,但是对于一个多用户共存的系统中,当然不能够出现用户相互越权等一系列的安全问题,所以如何正确的管理账户成为了Linux系统中至关重要的 ...

  4. t-SNE 从入门到放弃

    t-SNE 算法 1 前言 t-SNE 即 t-distributed stochastic neighbor embedding 是一种用于降维的机器学习算法,在 2008 年由 Laurens v ...

  5. nGrinder 参数使用

    背景: 性能测试中为了更加接近真实模拟现实应用,对于提交的信息每次都需要提交不同的数据,或使用不同的值,最为典型的就是登录时的账号. 性能测试工具需要提供动态参数化功能,如商业化的LoadRunner ...

  6. 【学习转载】MyBatis源码解析——日志记录

    声明:转载自前辈:开心的鱼a1 一 .概述 MyBatis没有提供日志的实现类,需要接入第三方的日志组件,但第三方日志组件都有各自的Log级别,且各不相同,但MyBatis统一提供了trace.deb ...

  7. Tomcat 源码环境搭建

    Tomcat 源码搭建 下载源码 下载地址 :https://tomcat.apache.org/download-80.cgi#8.5.35 下载之后解压缩 导入Idea 添加pom.xml文件 & ...

  8. Linux常用命令，查看树形结构、删除目录（文件夹）、创建文件、删除文件或目录、复制文件或目录（文件夹）、移动、查看文件内容、权限操作

    5.查看树结构(tree) 通常情况下系统未安装该命令,需要yum install -y tree安装 直接使⽤tree显示深度太多,⼀般会使⽤ -L选项⼿⼯设定⽬录深度 格式:tree -L n [ ...

  9. 【Java虚拟机3】类加载器

    前言 Java虚拟机设计团队有意把类加载阶段中的"通过一个类的全限定名来获取描述该类的二进制字节流"这个动作放到Java虚拟机外部去实现,以便让应用程序自己决定如何去获取所需的类. ...

  10. Redis：学习笔记-04

    Redis:学习笔记-04 该部分内容,参考了 bilibili 上讲解 Redis 中,观看数最多的课程 Redis最新超详细版教程通俗易懂,来自 UP主 遇见狂神说 10. Redis主从复制 1 ...