美文网首页
Promise函数的理解

Promise函数的理解

作者: 小苗晓雪 | 来源:发表于2019-10-22 23:06 被阅读0次

Promise接收两个参数, 这个两个参数都是函数 , 第一个函数如果执行就会把第一个函数里传递的实参保存到then的形参里 , 同理 , 如果第二个函数执行就会把第二个函数里传递的实参保存到catch的形参里!

/**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        new Promise(
            function (success, fail) {
                var timeOut = 0.5;
                setTimeout(function () {
                    if (timeOut < 1) {
                        success('成功');
                    }
                    else {
                        fail("失败");
                    }
                }, timeOut * 1000);
            }
        ).then(function (res) {
            console.log('then: ' + res);
        }).catch(function (reason) {
                 console.log('catch: ' + reason);
        });
         
    },

同样的 , 这两个只会有一个执行 , 如果你先执行了success('成功') , 然后紧接着执行 fail("失败") , 那么也只会执行最前面的成功的那句 , 反之亦然
也就是说success()和fail()都可以去执行 , 但是你传递的实参只会要么给then传递了 , 要么就给catch传递了 , 绝不会两个都传递 , 传递谁取决于你让谁先在Promise的执行函数里了! 第一个参数先执行就会是then , 第二个先执行就会是catch

onLoad: function (options) {
        new Promise(
            function (success, fail) {
                let timeOut;
                setTimeout(function () {
                    fail("失败");
                    success('成功');
                }, 1000);
            }
        ).then(function (res) {
            console.log('then: ' + res);
        }).catch(function (reason) {
            console.log('catch: ' + reason);
        });

    },

但是如果你很奇怪的先.catch再.then , 并且先执行了第二个函数的话 , 就会回调回来catch的数据 , 然后也会走一遍then , 只不过then没有回调数据而已 , 不建议大家瞎搞~
就会如下图所示:

image.png
onLoad: function (options) {
        new Promise(
            function (success, fail) {
                let timeOut;
                setTimeout(function () {
                    fail("失败");
                    success('成功');
                }, 1000);
            }
        ).catch(function (reason) {
            console.log('catch: ' + reason);
        }).then(function (res) {
            console.log('then: ' + res);
        });

    },

但是你还是先执行成功 , 再执行失败 , 就算你先catch再then也是只执行then不执行catch
如下图所示:

image.png
onLoad: function (options) {
        new Promise(
            function (success, fail) {
                let timeOut;
                setTimeout(function () {
                    success('成功');
                    fail("失败");
                }, 1000);
            }
        ).catch(function (reason) {
            console.log('catch: ' + reason);
        }).then(function (res) {
            console.log('then: ' + res);
        });

    },

愿编程让这个世界更美好

相关文章

  • async函数

    async 要理解 async 先要掌握 Promise 的概念,了解 Promise 请戳我! async 函数...

  • Promise函数的理解

    Promise接收两个参数, 这个两个参数都是函数 , 第一个函数如果执行就会把第一个函数里传递的实参保存到the...

  • Generator

    异步编程解决方案 Generator 函数、Promise 、回调函数、事件 Generator 函数有多种理解角...

  • js - Promise

    1 promise的定义 promise 是javascript中用来处理异步编程的方案, 可以理解为一个函数或...

  • 手写Promise(自定义Promise)

    首先我们得先理解Promise工作的机制,其实Promise就是一个构造函数 它的内部有三个状态: pending...

  • 如何正确的使用Promise

    promise用法 对比传统回调函数与Pormise的写法 传统回调函数 Promise的写法 Promise要比...

  • 13,Promise构造函数、then的理解

    深入理解,转至题10

  • Promise的理解

    Promise的理解:Promise是异步编程的一种方式,以同步的方式进行编程,避免了层层嵌套的回调函数,更加合理...

  • Promise

    ES规定,Promise对象是一个构造函数,用来生成Promise实例 Promise 构造函数接受一个函数作为参...

  • 循环多个 Promise 异步函数

    了解Promise 循环多个 Promise 异步函数

网友评论

      本文标题:Promise函数的理解

      本文链接:https://www.haomeiwen.com/subject/jdacvctx.html