<!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. vue组件的生命周期详解

    1.生命周期&生命周期函数 生命周期:指一个组件从创建->运行->销毁的整个阶段,强调的是一个时间段. 生命周期函数:由vue框架提供的内置函数,会伴随着组件的生命周期,自动按序执 ...

  2. Ubuntu20.04安装 maven并配置阿里源

    Ubuntu20.04安装 maven并配置阿里源 sudo apt update sudo apt install maven #安装maven,默认安装路径为/usr/share/maven 添加 ...

  3. 10 月 30 日 北京 LiveVideoStack 阿里云视频云专场限量赠票 100 张

    10 月 30 日 | 北京 LiveVideoStack 将携手阿里云共邀 4 位技术大咖,一同探讨从上云到创新,视频云的新技术与新场景.阿里云视频云依托阿里云服务数百万开发者的卓越服务能力与实践, ...

  4. 题解 51nod 1597 有限背包计数问题

    题目传送门 题目大意 给出 \(n\),第 \(i\) 个数有 \(i\) 个,问凑出 \(n\) 的方案数. \(n\le 10^5\) 思路 呜呜呜,傻掉了... 首先想到根号分治,分别考虑 \( ...

  5. 使用YApi搭建API接口管理工具(docker安装)

    使用YApi搭建API接口管理工具(docker安装) 工具描述 YApi 是高效.易用.功能强大的 api 管理平台,旨在为开发.产品.测试人员提供更优雅的接口管理服务.可以帮助开发者轻松创建.发布 ...

  6. el-scrollbar滚动条置底

    <el-scrollbar ref="leftScrollbar" style="height: 600px"></el-scrollbar& ...

  7. 测试小姐姐问我 gRPC 怎么用，我直接把这篇文章甩给了她

    原文链接: 测试小姐姐问我 gRPC 怎么用,我直接把这篇文章甩给了她 上篇文章 gRPC,爆赞 直接爆了,内容主要包括:简单的 gRPC 服务,流处理模式,验证器,Token 认证和证书认证. 在多 ...

  8. 改善深层神经网络-week3编程题（Tensorflow 实现手势识别 ）

    TensorFlow Tutorial Initialize variables Start your own session Train algorithms Implement a Neural ...

  9. UltraSoft - Beta - 项目展示

    UltraSoft - DDL Killer - Beta 项目展示 团队介绍 CookieLau fmh 王 FUJI LZH DZ(转出) Monster hdl(转入) PM & 后端 ...

  10. AlertManager集群搭建

    AlertManager集群搭建 一.AlertManager集群搭建 1.背景 2.机器 3.集群可用配置 4.alertmanager启动脚本 1.127.0.0.1:9083 机器启动脚本 2. ...