<!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. 如何把springboot项目部署到tomcat上

    前言: 开始以为打包springboot项目为war包丢到tomcat上的webapps下面就可以访问controller层的路径了,可是调用接口却报404的错误,而打开8080的主页,不加路径却可以 ...

  2. 经典软件测试面试题目：Android 和 ios 测试区别？这样回答：稳！

    Android 和  ios 测试区别? App 测试中 ios 和 Android 有哪些区别呢?1.Android 长按 home 键呼出应用列表和切换应用,然后右滑则终止应用:2.多分辨率测试, ...

  3. oracle 查看表结构语句

    desc + 表名 describe命令 列出指定表的列定义,视图或同义词,或指定函数或存储过程的详述. 语法:desc[ribe]   {[模式.]对象[@链接串]} 模式 表示对象驻留的架构.如果 ...

  4. Docker-Java限制cpu和内存及浅析源码解决docker磁盘挂载失效问题

    需求 之前工作流的运行都是用的docker-java提供的api拉起的docker容器直接跑服务,但是最新线上的新业务资源消耗较大,单个容器如果不加控制,CPU和内存都会拉满,导致服务器莫名宕机事故的 ...

  5. Vite插件开发纪实：vite-plugin-monitor（上）

    背景 最近在webpack项目里接入了Vite(dev mode),为开发提效.效果是真的猛. 项目启动速度提升70%-80%,HMR直接碾压webpack dev server 为了更加精准的计算收 ...

  6. 支持remote write和exemplar的prometheus服务

    最近项目组在做Prometheus指标采集和告警,其中用到了Prometheus的exemplar特性,由于该特性比较新,当前支持该特性的存储有比较少.因此需要自行实现exemplar功能. 我在gi ...

  7. Java程序的执行过程

    Java程序的执行过程 编译器将 Java 源代码编译成字节码class文件 类加载到 JVM 里面后,执行引擎把字节码转为可执行代码 执行的过程,再把可执行代码转为机器码,由底层的操作系统完成执行

  8. NOIP&CSP 考前 Dev-cpp 的选项问题和考试心态

    (进入考场后您将获得一个崭新的 \(Dev-cpp\),没有中文,没有编译选项,没有缺省源:我还将获得一个崭新的脑子,没有心态,没有智商,没有调试能力--) 中文 \[Step1 \] \[Step2 ...

  9. 洛谷4360[CEOI2004]锯木厂选址 （斜率优化+dp）

    qwq 我感觉这都已经不算是斜率优化\(dp\)了,感觉更像是qwq一个\(下凸壳优化\)转移递推式子. qwq 首先我们先定义几个数组 \(sw[i]\)表示\(w[i]\)的前缀和 \(val[i ...

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

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