JavaScript ES6 promiss的理解。

本着互联网的分享精神,我将我对promise的理解分享给大家。

JavaScript ES6的promise方法主要应用在处理异步函数返回的结果,注意他不是将异步函数转换为同步函数,而是等异步函数有结果时在调用相应的方法进行处理。

promise有以下方法

  then() - 它最多需要有两个参数,第一个是成功后调用的方法,第二个是失败后调用的方法。

  catch() - 失败后调用的方法,他与then方法的失败后调用的方法类似,但是使用上有些区别,等下我会用案例讲解。

  all() - 接收一个数组作为参数,数组内可填写异步函数,当所有的异步函数都执行完后,会返回一个promise执行后的数组。但是有一点需要注意的是,入过参数内有一个方法报错那么他就会报错,并不会返回结果。

  race() - 他与all的方法类似也接受一个数组作为参数(也是如如果数组内有一个方法报错那么他将会报错,不会返回结果),但是有一点不同的是只返回一个结果,那就是哪个哪个函数最先执行完成返回的哪个结果。

  resolve() - 和then的第一个参数一样,返回一个promise成功后调用方法。

  reject() - 和then的第二个参数一样,返回一个promise失败后调用的方法。

万恶的异步套回调。

本案例中我使用定时器模拟ajax服务器异步请求。

function Fun(a, b, cb) {
    setTimeout(function () {
        cb(a + b)
    }, 1000)
}

Fun(1, 2 ,function (result) {
    console.log(result)
});
console.log(5); // 此时会先输出5在输出3

在复杂一点的案例肯定是回调套回调,这样做肯定是没有错代码也会执行,但是逻辑上不是很清晰。

function Fun(a, b, cb) {
    setTimeout(function () {
        cb(a + b)
    }, 1000)
}

Fun(1, 2, function (result) {
    if (result > 1) {
        Fun(result, 2, function (result) {
            Fun(result, 3, function (result) {
                console.log(‘完成‘, result)
            })
        })
    }
});
console.log(5); // 此时会先输出5在输出  完成 8

使用promise方法重写上面的案例- then的使用

function Fun(a, b) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve(a + b)
        }, 1000)
    })
}
Fun(1, 2)
    .then(function (result) {
        if (result > 1) {
            return Fun(result, 2)
        }
    })
    .then(function (result) {
        if (result > 1) {
            return Fun(result, 3)
        }
    }).then(function (result) {
    console.log(‘完成‘, result)
});

使用then方法处理错误失败

then的第一个参数是处理Promise成功后使用的方法,第二个参数是Promise处理失败后的方法,下面的案例我将会模拟错误。

如果Fun函数内传入的参数不是number类型,则触发then方法的错误处理函数,也就是第二个函数,当然第一个函数就不会执行了。

function Fun(a, b) {
    return new Promise(function (resolve, reject) {
        if (typeof a !== ‘number‘ || typeof b !== ‘number‘) {
            reject(new Error(‘no number‘))
        }
        setTimeout(function () {
            resolve(a + b)
        }, 1000)
    })
}
Fun(1, ‘1‘)
    .then(function (result) {
        if (result > 1) {
            return Fun(result, 2)
        }
    }, function (err) {    //这个方法将会被执行,因为报错了么,很好理解吧
        console.log(err )
    })
    .then(function (result) {
        console.log(‘第二个then‘); //输出 第二个then 如果第一个then中的错误方法运用的妥当,对这里是不会有影响的,但是我并没有做相应的处理 只是输出了err, result返回的是undefined,if中的方法也就不会执行了。
        if (result > 1) {
            return Fun(result, 3)
        }
    });

使用 catch捕获错误 - catch方法的使用

then方法是从上向下运行,运行的中如果有发生错误的那么then方法就会在发生错误哪里停止运行,并且调用错误方法。注意:他与then的方法不同,then的处理机制处理完会继续向下执行,而catch却不会,会跳过未执行的then直接进入catch

function Fun(a, b) {
    return new Promise(function (resolve, reject) {
        if (typeof a !== ‘number‘ || typeof b !== ‘number‘) {
            reject(new Error(‘no number‘))
        }
        setTimeout(function () {
            resolve(a + b)
        }, 1000)
    })
}
Fun(1, 1)
    .then(function (result) {
        if (result > 1) {
            console.log(1)  // 1正常输出。
            return Fun(result, ‘2‘) //这里2不是number类型.
        }
    })
    .then(function (result) { // 由于上面传入的参数不是number类型,这里的then 就会调用错误处理,也就是说会执行catch方法。     console.log(2)  // 不会执行
        if (result > 1) {
            return Fun(result, 3)
        }
    })
    .then(function (result) {     console.log(3) // 不会执行
        console.log(‘完成‘, result)
    })
    .catch(
        function (err) {
            console.log(err)
        }
    );

如果使用catch和then的第二个参数同时捕获参数会怎么样呢?

如果then方法有第二个参数那么catch就不会执行,就会执行自己的第二个参数。可以将catch理解为接盘侠,如果then没有处理错误的方法,那么catch内的方法就会执行,如果同时没有then的第二个方法和catch那么就不会报错,因为压根就没有错误的处理机制那么就不会报错了。

function Fun(a, b) {
    return new Promise(function (resolve, reject) {
        if (typeof a !== ‘number‘ || typeof b !== ‘number‘) {
            reject(new Error(‘no number‘))
        }
        setTimeout(function () {
            resolve(a + b)
        }, 1000)
    })
}
Fun(1, ‘1‘)
    .then(function (result) {
        if (result > 1) {
            return Fun(result, 2)
        }
    }, function (err) {   //执行 输出 no number +12
        console.log(err + ‘12‘)
    })
    .then(function (result) {
        console.log(‘第二个then‘); // 执行输出 第二个then
        if (result > 1) {  //这里不会执行因为没有result 因为result 是undefined 如果在第一个then的处理方法内处理的妥当这里就可以执行。
            return Fun(result, 3)
        }
    })
    .catch(function (err) {  //这里不会执行,因为每个then有自己的处理方式,所以catch就不会执行。
        console.log(err + ‘我是catch的错误处理‘)
    });
时间: 2024-10-19 02:23:10

JavaScript ES6 promiss的理解。的相关文章

JavaScript es6 class类的理解。

在本篇文章我将会把我对JavaScript  es6新特性class类的理解.本着互联网的分享精神,我就将我自己的理解分享给大家. 使用es写一个类(构造函数) 在es5中大家一般都这么写一个类(构造函数) 另外需要注意,class类不会被提升. // 创建一个User构造函数 function User(name, age) { this.name = name; this.age = age; } // User构造函数的静态方法. User.getClassName = function

JavaScript 模块化入门Ⅰ:理解模块

作为一名JS初学者.假如你听到了一些诸如"模块化构建&模块化载入" "Webpack&Browserify" 或者 "AMD&CMD"之类的术语,肯定瞬间就凌乱了. JavaScript的模块化听起来挺深奥,可其实理解它对开发者来说特别实用. 在这篇文章里,我会尽量深入浅出地把这些深奥的术语翻译成浅显易懂的人话(加上一些代码示例).希望你多少能从中学到点东西. 为了避免长篇大论,整个内容会分为两篇文章,这是第一部分,主要介

JavaScript ES6 核心功能一览

JavaScript 在过去几年里发生了很大的变化.这里介绍 12 个你马上就能用的新功能. JavaScript 历史 新的语言规范被称作 ECMAScript 6.也称为 ES6 或 ES2015+ . 自从 1995 年 JavaScript 诞生以来,它一直在缓慢地发展.每隔几年就会增加一些新内容.1997 年,ECMAScript 成为 JavaScript 语言实现的规范.它已经有了好几个版本,比如 ES3 , ES5 , ES6 等等. 如你所见,ES3,ES5 和 ES6 之间分

JavaScript ES6功能概述(ECMAScript 6和ES2015 +)

JavaScript在过去几年中发生了很大的变化.这些是您今天可以开始使用的12项新功能! 该语言的新增内容称为ECMAScript 6.它也称为ES6或ES2015 +. 自1995年JavaScript构思以来,它一直在缓慢发展.每隔几年就会发生新增事件. ECMAScript于1997年成立,旨在指导JavaScript的发展方向.它已经发布了ES3,ES5,ES6等版本. 如您所见,ES3,ES5和ES6之间存在10年和6年的差距.此后每年??进行小幅增量变更.而不是像ES6那样一次做大

JavaScript ES6中export及export default的区别

相信很多人都使用过export.export default.import,然而它们到底有什么区别呢? 在JavaScript ES6中,export与export default均可用于导出常量.函数.文件.模块等,你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用,但在一个文件或模块中,export.import可以有多个,export default仅有一个. 具体使用: 1. //demo1.js export con

javascript this的范围理解

<html> <head> <title>javascript this的范围理解</title> </head> <body> <script type="text/javascript"> //在javascript中,函数总是在一个特殊的上下文执行(称为执行上下文),如果你将一个对象的函数赋值给另外一个变量的话,这个函数的执行上下文就变为这个变量的上下文了 window.name = "

第二话:javascript中闭包的理解

闭包是什么? 通过闭包,子函数得以访问父函数的上下文环境,即使父函数已经结束执行. OK,我来简单叙述下,先上图. 都知道函数是javascript整个世界,对象是函数,方法是函数,并且js中实质性的面向对象相关也都是函数来实现和延伸,例如:"类". window:是指js中window类,也是js最高一层,因为什么这么说,因为你所有创建的方法和属性其实都在window之内.window中的所有方法,在自己创建的方法中都可以调到.可以仔细想想alert,在任何地方都可以alert,其实

Javascript ES6 特性概述(即ECMAScript 6和ES2015+)

Javascript在过去的一年里变化了很多,从现在开始,有12个新的特性可以开始用了! 1. 历史 ECMAScript 6是对Javascript语言的增强,有时候也被称为ES6或者ES2015+. Javascript诞生在1995年,从那以后一直在缓慢地演变,每隔几年会有一些新的增强特性出现.ECMAScript出现在1997年,目的是指导Javascript的演化路径,它已经发布了好几个版本,如ES3.ES5.ES6,等等. 可以看到,在ES3.ES5和ES6之间分别有10年和6年的空

03.JavaScript 面向对象精要--理解对象

JavaScript 面向对象精要--理解对象 尽管JavaScript里有大量内建引用类型,很可能你还是会频繁的创建自己的对象.JavaScript中的对象是动态的. 一.定义属性 当一个属性第1次被添加给对象时JavaScript在对上上调用了一个名为 [[Put]]的内部方法,该方法会在对象上创建一个新节点保存属性,就像 哈希表上第一次添加一个键一样这个操作不仅指定了初始值 也定义了属性的一些特征 1.1 [[Put]]内部方法 [[Put]]在对象上创建一个自有属性 1.2 [[Set]