<!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. P7443-加边【博弈论】

    正题 题目链接:https://www.luogu.com.cn/problem/P7443?contestId=41429 题目大意 \(n\)个点的一棵有根树,两个人从一号点开始进行有向图博弈. ...

  2. 用Fiddler抓不到https的包？因为你姿势不对！往这看！

    前言 刚入行测试的小伙伴可能不知道,Fiddler默认抓http的包,如果要抓https的包,是需要装证书的!什么鬼证书?不明白的话继续往下看. Fiddler 抓取 https 数据 第一步:下载 ...

  3. Phalcon多模块如何实现连接不同数据库 《Phalcon入坑指南系列 五》

    本系列目录 一.Phalcon在Windows上安装 <Phalcon入坑指南系列 一> 二.Phalcon入坑必须知道的功能<Phalcon入坑指南系列 二> 三.Phalc ...

  4. 从产业链、架构和技术三个层面，看元宇宙与RPA的发展关系

    你可能还不知道,元宇宙也将带动RPA高速发展 一文读懂RPA如何赋能元宇宙,虚拟空间更需要RPA无处不在 三个层面,解读元宇宙如何利好RPA行业发展 从产业链.架构和技术三个层面,看元宇宙与RPA的发 ...

  5. 阿里：MySQL数据库规范

    阿里:MySQL数据库规范 简介:基于阿里数据库设计规范扩展而来 设计规范 1.[推荐]字段允许适当冗余,以提高查询性能,但必须考虑数据一致.冗余字段应遵循: 不是频繁修改的字段. 不是 varcha ...

  6. SpringBoot 简易实现热搜邮件推送，妈妈再也不用担心我不了解国家大事了

    1.前言 上班的时候,无聊的时候,偶尔跑去百度看下热搜,所以就萌生出这种想法,通过邮件推送的方式实现效果,首先找到百度热搜的页面 热搜,话不多说,直接开干. 2.环境准备 因为是个SpringBoot ...

  7. HBase基础

    Hadoop生态系统 HBase简介 HBase – Hadoop Database,是一个高可靠性.高性能.面向列.可伸缩.实时读写的分布式数据库 利用Hadoop HDFS作为其文件存储系统,利用 ...

  8. Hibernate的介绍及入门小案例

    1.Hibernate的诞生 在以前使用传统的JDBC开发应用系统时,如果是小型应用系统,并不觉得有什么麻烦,但是对于大型应用系统的开发,使用JDBC就会显得力不从心,例如对几十,几百张包含几十个字段 ...

  9. SpringBoot-thymeleaf-静态资源引入和接管

    引入前端 templates下放html页面 static下放css.js.image等静态资源 添加thymeleaf命名空间 <html lang="en" xmlns: ...

  10. TypeError: Restaurant() takes no arguments

    1. 错误描述 TypeError: Restaurant() takes no arguments 2. 原因:在编写__init__时,pycharm会自动添加关键字,有时会直接写称整型int, ...