Promise的基本使用

最新推荐文章于 2022-04-01 11:53:09 发布
最新推荐文章于 2022-04-01 11:53:09 发布
阅读量80 收藏
点赞数 1
文章标签： javascript js vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/awwwwmman/article/details/115300601
版权

链式编程

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>

<script>
    // 使用setTimeout
    // setTimeout(() => {
    //     console.log("hello world");
    // }, 2000)

    // 参数->函数(resolve,reject)
    // resolve,reject本身他又是函数

    // 链式编程
    new Promise((resolve, reject) => {
        // 第一次网络请求的代码
        setTimeout(() => {
            resolve()
        }, 1000)
    }).then(() => {
        // 第一次拿到结果的代码
        console.log('hello world');
        console.log('hello world');
        console.log('hello world');
        console.log('hello world');
        console.log('hello world');

        return new Promise((resolve, reject) => {
            // 第二次网络请求的代码
            setTimeout(() => {
                resolve()
            }, 1000)
        }).then(() => {
            // 第二次拿到结果的代码
            console.log('hello Vue');
            console.log('hello Vue');
            console.log('hello Vue');
            console.log('hello Vue');
            console.log('hello Vue');

            return new Promise((resolve, reject) => {
                // 第三次网络请求的代码
                setTimeout(() => {
                    resolve()
                }, 1000)
            }).then(() => {
                // 第三次拿到结果的代码
                console.log('hello python');
                console.log('hello python');
                console.log('hello python');
                console.log('hello python');
                console.log('hello python');
            })
        })
    })
</script>

</html>
什么情况下会用到Promise？

一般情况下是有异步操作时，使用Promise对这个异步操作进程封装.

在执行传入的回调函数时，会传入两个参数，resolve，reject，本身又是函数

使用Promise

new Promise((resolve, reject) => {
        setTimeout(() => {
            // 成功的时候调用resolve
            resolve('hello world')

            // 失败的时候调用reject
            reject('error message')
        }, 1000)
    }).then((data) => {
        // 在这里处理代码
        console.log(data);
        console.log(data);
        console.log(data);
    }).catch(err => { //箭头函数只有一个参数时小括号可以不写
        console.log(err);
    })

另一种写法

new Promise((reslove, reject) => {
    setTimeout(() => {
    reslove("hello world");
    // reject("error message")
    }, 1000)
}).then(data => {
    console.log(data);
   }, err => {
      console.log(err);
     })

链式调用

1.网络请求:aaa=>处理10行代码
2.处理:aaa111=>自己处理10行
3.处理:aaa111222=>自己处理十行

new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('aaa')
            }, 1000);
        }).then(res => {
            // 1.自己处理10行代码
            console.log(res, '第一层的10行处理代码');

            // 2.对我们的结果进行第一次的处理
            return new Promise((resolve) => {
                resolve(res + '111')
            })
        }).then(res => {
            console.log(res, '第二层的10行处理代码');

            return new Promise(resolve => {
                resolve(res + '222')
            })
        }).then(res => {
            console.log(res, '第三层的10行代码');
        })

简写方式

// new Promise(resolve => resolve(结果))简写
        new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('aaa')
            }, 1000);
        }).then(res => {
            // 1.自己处理10行代码
            console.log(res, '第一层的10行处理代码');

            // 2.对我们的结果进行第一次的处理
            return Promise.resolve(res + '111')
        }).then(res => {
            console.log(res, '第二层的10行处理代码');

            return Promise.resolve(res + '222')
        }).then(res => {
            console.log(res, '第三层的10行代码');
        })

更简洁的方式

省略掉Promise.resolve

 // 省略掉Promise.resolve
        new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('aaa')
            }, 1000);
        }).then(res => {
            // 1.自己处理10行代码
            console.log(res, '第一层的10行处理代码');

            // 2.对我们的结果进行第一次的处理
            return res + '111'
        }).then(res => {
            console.log(res, '第二层的10行处理代码');

            return res + '222'
        }).then(res => {
            console.log(res, '第三层的10行代码');
        })

注意

如果在执行过程中失败时执行reject则不执行后面的resolve

Promise的all方法

伪代码表示
同时请求成功返回一个results数组

Promise.all([
            new Promise((resolve, reject) => {
                $ajax({
                    url: 'url1',
                    success: function(data) {
                        resolve(data)
                    }
                })
            }),
            new Promise((resolve, reject) => {
                $ajax({
                    url: 'url2',
                    success: function(data) {
                        resolve(data)
                    }
                })
            }),
        ]).then(results => {
            results[0],
                results[1]
        })

利用setTimeout()模拟一下

 Promise.all([
            new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve({
                        name: 'JGF',
                        age: '30'
                    });
                }, 2000);
            }),
            new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve({
                        name: 'MGM',
                        age: '26'
                    });
                }, 1000);
            }),
        ]).then(results => {
            console.log(results);
        })
芜独独
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Promise
hao_xiao_guang的博客
09-30 352
什么是Promise？ ES6 新增异步解决方案 Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。 从语法上说，promise是一个对象，从它可以获取异步操作的的最终状态（成功或失败）。 Promise 是一个构造函数，对外提供统一的 API，自己身上有all、reject、resolve等方法，原型上有then、catch、finally等方法。 Promise的两个特点 Promise对象的状态不受外界影响 1）pending 初始状.
js代码-Promise基本使用2
07-16
Promise的基本使用2主要涵盖了Promise的创建、状态转换、链式调用以及错误处理等方面。让我们深入探讨一下这些关键概念。 首先，Promise有三种状态：pending（等待中）、fulfilled（已成功）和rejected（已失败）。...
Promise 的使用
学习记录和总结
08-21 597
Promise的使用：基本使用、API、关键问题
Promise使用
小白学编程
09-15 4534
1.常用用法 //promise主要用来解决低于回调问题 //fs.readFile是一个异步函数，如果直接调用，不使用promise,是无法返回结果 const fs = require('fs') function getFileByPath(fpath){ //resolve是成功之后的回调函数，reject是失败之后的回调函数 var promise = new Pr...
promise的方法介绍
PublicStatic0816的博客
09-21 192
//than()方法 //简单来讲，then 方法就是把原来的回调写法分离出来，在异步操作执行完后，用链式调用的方式执行回调函数。 // 而 Promise 的优势就在于这个链式调用。 // 我们可以在 then 方法中继续写 Promise 对象并返回，然后继续调用 then 来进行回调操作。 function cook(){ console.log(‘开始做饭。’); var p = new ...
Promise的使用
CoderVic的博客
04-01 121
Promise的使用方法
js代码-promise的基本使用
07-14
综上所述，`js代码-promise的基本使用`这个主题覆盖了Promise的基础知识，包括创建Promise、处理异步操作、链式调用、Promise.all、Promise.race以及async/await的使用。`main.js`文件很可能包含了这些用法的示例...
Promise Promise.all 的使用
03-02
1.解决图片上传是否成功 2.图片上传顺序 3.Primise.all 的使用练习 4.同队列类型的请求也可使用
Promise的基本实现和使用讲解
08-12
Promise的基本概念、实现以及使用方法是每个JavaScript开发者必须掌握的关键知识点。 Promise对象有三种状态：pending（等待中）、fulfilled（已完成）和rejected（已拒绝）。Promise从pending开始，可以变为...
ES6中Promise的使用方法实例总结
10-15
主要介绍了ES6中Promise的使用方法,结合实例形式总结分析了Promise对象中的各种常用方法及基本使用技巧,需要的朋友可以参考下
浅谈JavaScript中promise的使用
10-20
1. **Promise的基本用法**： - 创建Promise实例时，通常会传入一个执行器函数，该函数接受两个参数：`resolve`和`reject`。`resolve`用于在异步操作成功时调用，`reject`则用于在操作失败时调用。 ```javascript ...
es6中Promise 对象基本功能与用法实例分析
10-15
下面是一个使用Promise加载图片的例子： ```javascript function loadImageAsync(url) { return new Promise((resolve, reject) => { const image = new Image(); image.onload = function() { resolve(image);...
js代码-promise基本操作
07-14
在压缩包中的`main.js`文件很可能是包含Promise基本操作示例的代码，可能包括异步操作如文件读取、网络请求等。而`README.txt`文件通常用来说明代码的功能或者如何运行这些代码。 总的来说，Promise是JavaScript...
由浅入深，从掌握Promise的基本使用到手写Promise.doc
07-11
2. **Promise的使用** 我们可以通过`.then()`方法添加成功和失败的回调。`.then()`接受两个参数，第一个参数是成功回调，第二个参数是失败回调。当Promise状态变为fulfilled时，成功回调会被调用，接收到`resolve`...
ES6 Promise对象的含义和基本用法分析
10-16
2. Promise 的基本用法 - 构造 Promise：通过 `new Promise` 创建一个 Promise 实例，传入一个执行器函数，该函数接收两个参数 —— resolve 和 reject。这两个函数分别用于改变 Promise 的状态，当异步操作成功时...
十、Promise
光明小学王小雨的博客
11-27 347
一、简介 1、Promise是异步编程的一种解决方案。 我们封装一个网络请求的函数，因为不能立即拿到结果，所以不能像简单的3+4=7一样将结果返回。所以往往我们会传入另外一个函数，在数据请求成功时，将数据通过传入的函数回调出去。 如果只是一个简单的网络请求，那么这种方案不会给我们带来很大的麻烦。但是，当网络请求非常复杂时，就会出现回调地狱。 2、我们来考虑下面的场景(有夸张的成分)： 我们需要通过一个url1从服务器加载一个数据data1，data1中包含了下一个请求的url2 我们需要通过data1取出u
promise基本语法
最新发布
09-01
promise基本语法如下： 1. 创建Promise对象： ```javascript const promise = new Promise((resolve, reject) => { // 异步操作逻辑 }); ``` 2. 处理异步操作逻辑： 在Promise的构造函数中，执行异步操作...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值