资讯专栏INFORMATION COLUMN

Promise快速入门

bergwhite / 1715人阅读

摘要:周五就想写这篇文章,但是无奈花花世界的诱惑太多就一直拖到了今天,自责遍进入正题对象用于表示一个异步操作的最终状态完成或失败,以及其返回的值。

周五就想写这篇文章,但是无奈花花世界的诱惑太多……就一直拖到了今天,自责1e4遍;
进入正题Promise:

Promise 对象用于表示一个异步操作的最终状态(完成或失败),以及其返回的值。

上为MDNPromise的定义;
ES6规定Promise是一个构造函数,用来生成Promise实例(就是跟new一个女朋友一样);
Promise意为‘承诺’,承诺是发生在未来且必须达成的事,对应Promise对象是一个保存着未来才会结束的异步操作的“容器”;

Promise对象代表的异步操作有三个状态:

pending (进行中)

fulfilled (已成功)

rejected (已失败)

Promise对象有一下两个特点:

上述的三个状态一经改变则不会更改且任何时候都可以得到这个结果

只有异步操作的结果可以决定当前状态的变化,其他任何操作都不改变Promise对象的状态,即承诺这个词的由来,也表现了程序猿的浪漫~~

先说说基本用法然后再来实操~
const promise = new Promise(function(resolve, reject) {
  // ... some code 立即执行

  if (/* 异步操作成功 */){
    resolve(value);// 将状态改为fulfilled 并将参数传递给then中的回调函数
  } else {
    reject(error);// 将状态改为rejected 并将参数传递给then/catch中的回调函数
  }
});
// then方法接受两个参数分别对应两个状态的处理,其中对应rejected的参数可选,两个参数都接受上面promise对象传出的参数作为参数
promise.then(function(value) {
  // success 成功处理
}, function(error) {
  // failure 错误处理
});

了解了基本用法我们来了解一下Promise到底有啥用啊,我的理解就是以同步的方式(链式调用)去处理异步操作(回调),在这个Promise对象出现之前我们是怎么处理异步操作的呢?
举个栗子~:

console.log("start");
setTimeout(function (name) {
          var fruitList = name + ",";

          setTimeout(function (name) {
            fruitList += name + ",";

            setTimeout(function (name) {
              fruitList += name + ",";

              setTimeout(function (name) {
                fruitList += name + ",";

                setTimeout(function (name) {
                  fruitList += name;

                  console.log(fruitList);

                }, 1, "西瓜");

              }, 1, "香蕉");

            }, 1, "橘子");

          }, 1, "苹果");}, 1, "葡萄");
          
          console.log("上面是个异步过程,所以我先出来,后面才是水果");

我这里只是简单的写了几层简单的定时器而已,如果要很多很多层并且稍微复杂一点的回调函数就很难以维护了且代码阅读很难受。所以Promise的出现就是为了链式的调用来实现这种异步操作同样以本例改为Promise的方式来一遍~:

console.log("start");
var promise1 = new Promise((resolve,reject)=>{
              setTimeout(resolve("葡萄"),1);
          });
promise1.then(value=>new Promise((resolve,reject)=>setTimeout(resolve(value+",苹果"),1)))
        .then(value=>new Promise((resolve,reject)=>setTimeout(resolve(value+",橘子"),1)))
        .then(value=>new Promise((resolve,reject)=>setTimeout(resolve(value+",香蕉"),1)))
        .then(value=>new Promise((resolve,reject)=>setTimeout(resolve(value+",西瓜"),1)))
        .then(value=>{console.log(value)});

console.log("上面是个异步过程,所以我先出来,后面才是水果");

其实本例中的reject参数可以省略,因为我默认他肯定会成功的了,额还有就是写function比较麻烦这里直接用了箭头函数~~恩……在科普一个小坑给你们,如果在vue中使用promise用箭头函数要比写function舒服很多,function中this指向的是window而不是vue实例~

再来看看下面这个抛出错误的相关栗子:

console.log("start");
        new Promise((resolve, reject) => {
            var data = [1,2,3,4,5,6,7];
            return resolve(data);
        })
        .then((result) => {
            var newResult = result.slice(1);   
            return newResult;
        })
        .then((result)=>{
            console.log(result);
            throw new Error("someting error");
        })
        .catch((value)=>{
            console.log(value);// 抛出错误之后 执行catch操作 接受的参数是抛出的错误,其实.catch只是Promise.then(reject)的别名而已
        })
        .then((value) => {
            console.log(value);// undefined 抛出错误后没有 return 所以这里是个undefined
            console.log("我任性,错了之后仍要执行");// catch之后仍然可以继续执行then操作 
        });

注释上写的很清楚咯~~

接下来在来个实际点的用法异步加载图片(原谅我其实是从阮一峰老师那里偷来的栗子吃):

function loadImageAsync(url){
        return new Promise((resolve,reject)=>{
        var image = new Image();
        image.onload = function(){
            resolve(image);
        }
        image.onerror = function(){
            reject(new Error("不能加载图片,url是"+ url));
        }
        image.src = url;
    });
}
loadImageAsync("QQ图片20171114220539.png").then(value =>{
    console.log(value);
    document.body.append(value);
});

由于最近确实是忙得头昏脑胀,就先简单的分享一波基础用法,剩下的关于promise的两种模式Promise.all()Promise.race()等我改天再加或者另发一篇吧
同样你也可以去这里学习了解一下:http://es6.ruanyifeng.com/#do...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/93400.html

相关文章

  • ES6-7

    摘要:的翻译文档由的维护很多人说,阮老师已经有一本关于的书了入门,觉得看看这本书就足够了。前端的异步解决方案之和异步编程模式在前端开发过程中,显得越来越重要。为了让编程更美好,我们就需要引入来降低异步编程的复杂性。 JavaScript Promise 迷你书(中文版) 超详细介绍promise的gitbook,看完再不会promise...... 本书的目的是以目前还在制定中的ECMASc...

    mudiyouyou 评论0 收藏0
  • 一起来学Promise

    摘要:参数如前面所提到的,方法只是方法的一个语法糖,原因就在于方法的参数为实际上是两个回调函数,分别用于处理调用它的对象的和状态,而方法就等价于状态处理函数。对象状态传递和改变的方法利用回调的返回值,可以控制某个操作后方法返回的对象及其状态。 注意,本文主要针对ES6标准实现的Promise语法进行阐述,实例代码也都使用ES6语法,快速入门ES6请参见ECMAScript 6 扫盲。 一分钟...

    liaoyg8023 评论0 收藏0
  • 前端必须要珍藏的技术文章和面试题

    摘要:前端工程师学习资料,快速查找面试题,经典技术文章的总结,编程技巧,帮助学习者快速定位问题花点时间整理出一下前端工程师日常工作所需要的学习资料查找,帮助学习者快速掌握前端工程师开发的基本知识编程始于足下记住再牛逼的梦想也抵不住傻逼似的坚持蝴蝶 前端工程师学习资料,快速查找面试题,经典技术文章的总结,编程技巧,帮助学习者快速定位问题花点时间整理出一下web前端工程师日常工作所需要的学习资料...

    youkede 评论0 收藏0
  • 前端必须要珍藏的技术文章和面试题

    摘要:前端工程师学习资料,快速查找面试题,经典技术文章的总结,编程技巧,帮助学习者快速定位问题花点时间整理出一下前端工程师日常工作所需要的学习资料查找,帮助学习者快速掌握前端工程师开发的基本知识编程始于足下记住再牛逼的梦想也抵不住傻逼似的坚持蝴蝶 前端工程师学习资料,快速查找面试题,经典技术文章的总结,编程技巧,帮助学习者快速定位问题花点时间整理出一下web前端工程师日常工作所需要的学习资料...

    MoAir 评论0 收藏0
  • Babel快速入门

    摘要:首先,作为入门的话,的用户手册是个很不错的选择,里面基本覆盖了使用的各方面。所以下面主要是我学习的一些笔记,姑且当作是一篇入门吧。下面我们正式进入正题。这也是最常用的一个用法之一。有两个方式进行配置。 首先,作为入门的话,Babel的用户手册是个很不错的选择,里面基本覆盖了Babel使用的各方面。所以下面主要是我学习Babel的一些笔记,姑且当作是一篇入门吧。 Babel是什么 按照B...

    notebin 评论0 收藏0

发表评论

0条评论

bergwhite

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<