4小时快速掌握ES6核心用法 - 1.17 promise的基本用法

最新推荐文章于 2023-01-04 17:01:54 发布
最新推荐文章于 2023-01-04 17:01:54 发布
阅读量186 收藏
点赞数
分类专栏： es6 文章标签： 前端 javascript html es6 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jolinoy/article/details/123710338
版权

1.17 promise的基本用法

1. Promise 它其实就是一个容器,里面保存着某个未来才会结束的事件(异步操作)的结果
各种异步操作都可以用同样的方法进行处理 axios
Promise接收一个函数作为参数,默认的relove和reject分别是两个函数


romise对象有以下两个特点。1.对象的状态不受外界影响 2.一旦状态改变，就不会再变，任何时候都可以得到这个结果
处理异步操作三个状态： Pending(进行) Resolved(成功) Rejected(失败)

<!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>1.17 promise的基本用法</title>
</head>

<body>
    <script>
        // 1. Promise 它其实就是一个容器,里面保存着某个未来才会结束的事件(异步操作)的结果
        // 各种异步操作都可以用同样的方法进行处理 axios
        // Promise接收一个函数作为参数,默认的relove和reject分别是两个函数

        // romise对象有以下两个特点。1.对象的状态不受外界影响 2.一旦状态改变，就不会再变，任何时候都可以得到这个结果
        // 处理异步操作三个状态： Pending(进行) Resolved(成功) Rejected(失败)

        let pro = new Promise(function(resolve,reject) {
            // .....一坨代码 来模拟异步

            let res = {
                code:200,
                data:{
                    name: 1,
                }
            }
            setTimeout(() => {
                if(res.code === 200){
                    resolve(res.data);
                }else{
                    reject('失败',res.error);
                }
            }, 1000);
            // if(成功的 1===1){

            //     resolve('成功');
            // }else{
            //     reject('失败');
            // }
        }); 

        console.log(pro);
        pro.then(function (value) {
        // success
        console.log(value); // 输出：{name: 1}

        },function(err) {
        // error
        })

        // 为什么改造? 因为上述代码 不能传参
        /*  function timeout(ms) {
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        resolve('hello world')
                    }, ms);
                })
            }
            timeout(1000).then((value) => {
                console.log(value);
         }) */


        // Promise对象的实例
        // const getJSON = function (url) {
        //     return new Promise((resolve, reject) => {
        //         const xhr = new XMLHttpRequest();
        //         xhr.open('GET', url);
        //         xhr.onreadystatechange = handler;
        //         xhr.responseType = 'json';
        //         xhr.setRequestHeader('Accept', 'application/json');
        //         xhr.send();

        //         function handler() {
        //             console.log(this.readyState);
        //             if (this.readyState !== 4) {
        //                 return;
        //             }
        //             if (this.status === 200) {
        //                 resolve(this.response);
        //             } else {
        //                 reject(new Error(this.statusText));
        //             }
        //         }
        //     })
        // }
        /* getJSON('https://free-api.heweather.net/s6/weather/now?location=beijing&key=4693ff5ea653469f8bb0c29638035976')
            .then((json) => {
                console.log(json);

            }, function (error) {
                console.error(error);

            }) */

        // then()方法
        // then()方法的第一个参数是resolve的回调函数,第二个参数(可选) 是reject状态的回调函数
        // then方法返回的一个新的Promise实例,可以采用链式写法
        /* getJSON('https://free-api.heweather.net/s6/weather/now?location=beijing&key=4693ff5ea653469f8bb0c29638035976')
            .then((json)=>{
                return json.HeWeather6;
            }).then((HeWeather6)=>{
                console.log(HeWeather6);
            }) */

        // catch() 等价于 then(null,err=>{})
        /*  getJSON('https://free-api.heweather.net/s6/weather/now?location=beijing&key=4693ff5ea653469f8bb0c29638035976')
                .then((json) => {
                    console.log(json);
                }).catch(err=>{
                    console.log(err);   
             }) */

        //  其它方法
        // resolve() reject() all() rece()  done()  finally()
        // (1)resolve()方法将现有对象转换为Promise对象
        // let p = Promise.resolve('foo');
        // 等价于 new Promise(resolve=>resolve('foo'));

        /* console.log(p);
        p.then((val)=>{
            console.log(val);
        }) */

        // (2)reject())方法也会返回一个新的Promise实例
        // let p2 = Promise.reject(new Error('出错了'));

        // p2.catch(err => {
        //     console.log(err);
        // })

        // Promise的all方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调
        // let Promise1 = new Promise(function (resolve, reject) {})
        // let Promise2 = new Promise(function (resolve, reject) {})
        // let Promise3 = new Promise(function (resolve, reject) {})

        // let p3 = Promise.all([Promise1, Promise2, Promise3])

        // p3.then(() => {
        //     // 三个都成功 则成功
        // }).catch(err => {
        //     // 只要有失败,都失败
        // })
        // 应用场景:一些游戏类的素材比较多的应用，打开网页时，预先加载需要用到的各种资源如图片、flash以及各种静态文件。
        // 所有的都加载完后，我们再进行页面的初始化。

        // race()方法

        //race的应用场景:比如我们可以用race给某个异步请求设置超时时间，并且在超时后执行相应的操作

        //请求某个图片资源
        /*    function requestImg(imgSrc) {
                var p = new Promise((resolve, reject) => {
                    var img = new Image();
                    img.onload = function () {
                        resolve(img);
                    }
                    img.src = imgSrc;
                });
                return p;
            }
           //延时函数，用于给请求计时
        function timeout() {
            var p = new Promise((resolve, reject) => {
                setTimeout(() => {
                    reject('图片请求超时');
                }, 5000);
            });
            return p;
        }
        Promise.race([requestImg('images/2.png'), timeout()]).then((data) => {
            console.log(data);
        }).catch((err) => {
            console.log(err);
           }); */


        // done() 处于回调函数的末端,保证抛出任何可能出现的错误


        // finally方法用于指定不管Promise对象最后状态如何，都会执行的操作。
        // 它与done方法的最大区别，它接受一个普通的回调函数作为参数，该函数不管怎样都必须执行。

        /*server.listen(0)
        .then(function () {
        // run test
        })
        .finally(server.stop);
        */
    </script>
</body>

</html>

longfei815
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
快速学习ES6新特性-Promise
01-07
1.7、Promise 所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步...
JS关于ES6的Promise.
qq_43558102的博客
09-16 139
1.回调与Promise 普通的回调函数（向服务端请求数据） function(cb){ SetTimeout(function(){ cb&&cb() },1000) } f(function(){ console.log(1); )
vue之js、css等静态文件的引入(vue路径篇)
CruellyJohn的博客
02-13 2万+
1、如何引入如js，css等文件？ 比如我们想引入jQuery文件或者依赖     若是已下载好的jQuery文件，则这样引入。 打开webpack.base.conf.js，在relove加入这段代码 // 在开头引入webpack，后面的plugins那里需要 var webpack = require('webpack') // resolve module.export...
axios与Promise
Kungirl的博客
08-19 2432
一、axios的介绍 1. 什么是异步？ 不会按照浏览器的加载方式 由上到下。 2. 前端哪里面有异步？ 1. 回调函数 　　2. 定时器 　　3. 事件绑定 　　4. ajax 3. promise是 es6 为解决异步编程的。 4.axios 是由 promise 封装的一个 http 的库。 　　 ...
js promise resolve()的用法
Superman_peng的博客
04-05 2万+
Promise 对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成 ，又称 Fulfilled）和 Rejected（已失败）。 通过回调里的resolve(data)将这个promise标记为resolved，然后进行 下一步then((data)=>{//do something})，resolve里的参数就是你要传入then的数据 执行到 resolve()这个方法的时候，就改变promise的状态为fullfiled ，当状态为 fuulfiled的时候就
手写Promise
neverlandkk的博客
04-20 129
勇敢勇敢我的朋友 该要会手写一些代码了 比如手写一把promise 手写promise 1. promise回顾 简单的回顾一下promise 为了解决异步操作提出的解决方案，正如它单词的本意，给你一个承诺， 会给你返回一个结果，成功或者失败，可以链式调用，避免回调地狱 有三个状态 pedding reslove reject ， 初始状态为pedding 实例化的时候会立即执行relove 或者 reject，状态会改变，一旦改变 就回不去了 1 最简单的开始 reslov
前端开源库-es6-promise-pool
08-29
4. **进度反馈**：`PromisePool`提供了监听任务进度的方法，可以实时获取到当前处理的任务数量和进度，这对于大型数据处理或者长任务的反馈很有帮助。 ### 使用示例 ```javascript const PromisePool = require('...
it-promise:类似ES6-----Promise
07-04
本篇文章将详细探讨Promise的基本概念、创建与使用，以及其常用的方法和模式。** ## 1. Promise的定义与状态 Promise代表一个异步操作的最终完成或失败，它可以有三种状态：pending（等待中）、fulfilled（已完成...
es6-promise-polyfill:es6-promise 的自动 polyfill 版本，promise 随心所欲！
06-27
es6-promise-polyfill es6-promise 的自动 polyfill 版本，promise 随心所欲！用法将其嵌入到[removed]标签中，并与 ES6 Promise 相同使用。 。
es6-string-html：es6多行字符串中的突出显示代码
02-05
在es6多行字符串中添加了对代码的语法突出显示支持： HTML（包括带引号和未引号的html的atts） SQL 社区 在ES6模板文字中突出显示CSS 在python多行字符串中突出显示SQL代码 在多行字符串中突出显示JS 安装 从扩展...
前端面试题记录
u014773932的博客
11-30 1321
前端 面试
js Promise
qq_43539854的博客
04-14 568
异步编程 JS异步机制 回调函数 使用多个回调函数嵌套会造成回调地狱，上下两层的代码耦合度高。 Promise Promise是ES6引入的异步编程的解决方案，Promise可以封装异步操作，获取成功和失败的结果。Promise的优点是：支持链式调用，可以解决回调地狱问题。 generator async 当函数内部执行到一个await语句时，如果语句返回一个promise对象，那么函数会等待promise变为resolve状态在继续向下执行。 Promise使用流程 首先创建Promise实例，然后P
学习总结常用的ES6语法（二）
周五星的博客
05-07 477
七、 module ES6 中模块化语法有两种形式 如果是输出一个唯一的对象，使用export default // 创建 util1.js 文件，内容如下 export default {// 导出 a:100 } // 创建 index.js 文件，内容如下 import obj from './util1.js'// 引入 console.log(obj) 如果想要输出许...
面试-笔试
wangweiqiang.csdn的专栏
02-27 126
1. console.log('script start') let promise1 = new Promise(function (resolve) { console.log('promise1') resolve() console.log('promise1 end') }).then(function () { console.log('promise2') }) s...
promise基础知识（面试题）
bukuaileya的博客
01-04 160
语法、promise的两个属性、状态属性的三个值以及规则、then之后的返回值、promise函数同步但是then方法内部代码是异步执行
Promise初步详解（resolve,reject,catch）
arzu19740204的博客
01-07 5049
一:何为Promise？ 为了直观一点，首先我们采用console.dir(Promise)看一下它的结构组成。 从上面的图片中我们可以到，Promise其实是一个构造函数，它有resolve，reject，race等静态方法;它的原型（prototype）上有then，catch方法，因此只要作为Promise的实例，都可以共享并调用Promise.prototype上面的方法...
Promise.resolve() 方法
热门推荐
雾里看花叹朦胧
03-04 4万+
Promise.resolve方法允许调用时不带参数，直接返回一个resolved状态的 Promise 对象。 所以，如果希望得到一个 Promise 对象，比较方便的方法就是直接调用Promise.resolve方法。 需要注意的是，立即resolve的 Promise 对象，是在本轮“事件循环”（event loop）的结束时，而不是在下一轮“事件循环”的开始时。 setTimeout(fu...
js中promise的几种用法
anderlaw的博客
08-17 1万+
promise解释： 一种非阻塞异步执行的抽象概念. 如果我们想在promise之后执行某些操作，只能通过then回调（请求成功时）或者catch回调（请求失败时），整个函数又会返回一个promise,只会在then里执行下一步操作. let success = Promise.resolve("success"); let failure = Promise.reject("failur...
高级前端软件工程师知识整理之基础篇(四)
@黄小泽的个人博客
04-09 560
21. JS里垃圾回收机制是什么？常用方法有哪些以及如何优化垃圾回收？ 由于字符串、对象和数组没有固定大小，所以当他们的大小已知时，才能对他们进行动态的存储分配。JavaScript程序每次创建字符串、数组或对象时，解释器都必须分配内存来存储那个实体。只要像这样动态地分配了内存，最终都要释放这些内存以便他们能够被再用，否则，JavaScript的解释器将会消耗完系统中所有可用的内存，造成系统崩溃...
可以 使用es6-promise插件来弄吗
最新发布
05-24
是的，你可以使用es6-promise插件来实现Promises。es6-promise是一个符合Promises / A +规范的Promise库，它提供了一个兼容性较好的Promise实现，并且支持所有主流浏览器和Node.js环境。你只需要在你的项目中引入es6...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值