Promise基本概念和基本示例使用

最新推荐文章于 2022-12-05 20:16:22 发布
最新推荐文章于 2022-12-05 20:16:22 发布
阅读量383 收藏 1
点赞数
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ME_GIRL/article/details/119864801
版权

0.引子

1.什么是promise?

promise是ES6中新增的异步编程解决方案, 在代码中的表现是一个对象

2.promise作用

  • 企业开发中为了保存异步代码的执行顺序, 那么就会出现回调函数层层嵌套
  • 如果回调函数嵌套的层数太多, 就会导致代码的阅读性, 可维护性大大降低
  • promise对象可以将异步操作以同步流程来表示, 避免了回调函数层层嵌套(回调地狱)

例如：

需求: 从网络上加载3个资源, 要求加载完资源1才能加载资源2, 加载完资源2才能加载资源3,前面任何一个资源加载失败, 后续资源都不加载

    function request(fn) {
        setTimeout(function () {
            fn("拿到的数据");
        }, 1000);
    }
    request(function (data) {
        console.log(data, 1);
        request(function (data) {
            console.log(data, 2);
            request(function (data) {
                console.log(data, 3);
            });
        });
    });
    // 回调函数层层嵌套

使用promise

    function request() {
        return new Promise(function (resolve, reject) {
            setTimeout(function () {
                resolve("拿到的数据");
            }, 1000);
        });
    }
    request().then(function (data) {
        console.log(data, 1);
        return request();
    }).then(function (data) {
        console.log(data, 2);
        return request();
    }).then(function (data) {
        console.log(data, 3);
    });

一、基础概念

1.什么是Promise?

Promise是ES6中新增的一个对象,
通过Promise就可以实现 用同步的流程来表示异步的操作
通过Promise就可以 避免回调函数层层嵌套(回调地狱)问题

2.如何创建Promise对象?

new Promise(function(resolve, reject){});

promise对象不是异步的, 只要创建promise对象就会立即执行存放的代码

3.Promise是如何实现 通过同步的流程来表示异步的操作的?

promise对象是通过状态的改变来实现的, 只要状态发生改变就会自动触发对应的函数

4.Promise对象三种状态

  • pending: 默认状态，只要没有告诉promise任务是成功还是失败就是pending状态
  • fulfilled(resolved): 只要调用resolve函数, 状态就会变为fulfilled, 表示操作成功
  • rejected: 只要调用rejected函数, 状态就会变为rejected, 表示操作失败
  • 注意点: 状态一旦改变既不可逆, 既从pending变为fulfilled, 那么永远都是fulfilled,既从pending变为rejected, 那么永远都是rejected

5.监听Promise状态改变

我们还可以通过函数来监听状态的变化

  • resolved --> then()
  • rejected --> catch()

二、promise-then方法

1.then方法接收两个参数

  • 第一个参数是状态切换为成功时的回调
  • 第二个参数是状态切换为失败时的回调
        let promise = new Promise((resolve, reject)=>{
            // resolve() // 将状态修改为成功，执行成功时的回调
            reject() // 将状态修改为失败，执行失败时的回调
        })
        promise.then(function(){
            console.log('成功时的回调');
        },function(){
            console.log('失败时的回调');
        })

2.在修改promise状态时，可以传递参数给then方法中成功的回调

        let promise = new Promise((resolve, reject)=>{
            // resolve() // 将状态修改为成功，执行成功时的回调
            reject('123') // 将状态修改为失败，执行失败时的回调
        })
        promise.then(function(){
            console.log('成功时的回调');
        },function(res){
            console.log('失败时的回调', res);
        })

=========>

        function success(){
            console.log('success123');
        }
        function error(data){
            console.log('error',data);
        }
        let promise = new Promise((resolve, reject)=>{
            // resolve() // 将状态修改为成功，执行成功时的回调
            reject('123') // 将状态修改为失败，执行失败时的回调
        })
        promise.then(success, error)

3.同一个promise对象可以多次调用then方法,当该promise对象的状态时所有then方法都会被执行

        let promise = new Promise((resolve, reject)=>{
            // resolve() // 将状态修改为成功，执行成功时的回调
            reject('123') // 将状态修改为失败，执行失败时的回调
        })
        promise.then(function(){
            console.log('成功时的回调1');
        },function(res){
            console.log('失败时的回调1', res);
        })
        promise.then(function(){
            console.log('成功时的回调2');
        },function(res){
            console.log('失败时的回调2', res);
        })

image.png

4. then方法每次执行完毕后会返回一个新的promise对象

        let promise = new Promise((resolve, reject)=>{
            // resolve() // 将状态修改为成功，执行成功时的回调
            reject('123') // 将状态修改为失败，执行失败时的回调
        })
        let p2 = promise.then(function(){
            console.log('成功时的回调1');
        },function(res){
            console.log('失败时的回调1', res);
        })
        console.log(p2); // promise对象
        console.log(p2 === promise); // false

5.可以通过上一个promise对象的then方法给下一个promise对象的then方法传递参数

注意点:无论是在上一个promise对象成功的回调还是失败的回调传递的参数,
都会传递给下一个promise对象成功的回调

        let promise = new Promise((resolve, reject) => {
            // resolve() // 将状态修改为成功，执行成功时的回调
            reject('123') // 将状态修改为失败，执行失败时的回调
        })
        let p2 = promise.then(function (res) {
            console.log('成功时的回调1', res);
            return '123'
        }, function (res) {
            console.log('失败时的回调1', res);
            return 'bbb'
        })
        p2.then(function (res) {
            console.log('成功时的回调2', res);
        }, function (res) {
            console.log('失败时的回调2', res);
        })

image.png

then方法返回的promise在promise.then可以接收到then方法return的参数

6.如果then方法返回的是一个Promise对象 , 那么会将返回的Promise对象的执行结果中的值传递给下一个then方法

        let promise = new Promise((resolve, reject)=>{
            resolve('1')
        })
        let ppp = new Promise((resolve, reject)=>{
            reject('ppp')
        })
        let p1 = promise.then(function(data){
            console.log('成功1', data);
            return ppp
        },function(data){
            console.log('失败1', data);
        })
        p1.then(function(data){
            console.log('成功2', data);
        },function(data){
            console.log('失败2', data);
        })

image.png

三、promise-catch方法

1.catch 其实是 then(undefined, () => {}) 的语法糖，没有成功的回调，只有失败的回调

	let promise = new Promise(function (resolve, reject) {
        // resolve(); // 将状态修改为成功
        reject(); // 将状态修改为失败
    });
    promise.catch(function () {
        console.log("abc");
    });

2.分开监听使用链式编程

如果需要分开监听, 也就是通过then监听成功通过catch监听失败
那么必须使用链式编程, 否则会报错

		let promise = new Promise((resolve, reject)=>{
            reject()
        })
        promise.then(function(){
            console.log('成功1');
        })
        promise.catch(function(){
            console.log('err');
        }) // 能监听到失败，但是会报错

=修改=>

		promise.then(function(){
            console.log('成功1');
        }).catch(function(){
            console.log('err');
        })

2.1 使用链式编程的原因是

  • 1.如果promise的状态是失败, 但是没有对应失败的监听就会报错
  • 2.then方法会返回一个新的promise, 新的promise会 继承 原有promise的状态
  • 3.如果新的promise状态是失败, 但是没有对应失败的监听也会报错
	let promise = new Promise(function (resolve, reject) {
        // resolve(); // 将状态修改为成功
        reject(); // 将状态修改为失败
    });
    let p2 = promise.then(function () {
        console.log("成功");
    });
    console.log(p2);
    promise.catch(function () {
        console.log("失败1");
    });
    // P2新的promise继承原有的promise状态，状态是失败，没有对应失败的监听会报错
    p2.catch(function () {
        console.log("失败2");
    });

3.和then一样, 在修改promise状态时, 可以传递参数给catch方法中的回调函数

		let promise = new Promise((resolve, reject)=>{
            reject('失败了哦')
        })
        promise.catch(function(data){
            console.log(data); // 失败了哦
        })

4.和then一样, 同一个promise对象可以 多次 调用catch方法, 当改变promise对象的状态时所有catch方法都会被执行

		let promise = new Promise((resolve, reject) => {
            reject()
        })
        promise.catch(function () {
            console.log('失败1');
        })
        promise.catch(function () {
            console.log('失败2');
        })
        promise.catch(function () {
            console.log('失败3');
        })
        /**
			执行结果
				失败1
				失败2
				失败3
		*/

5.和then一样, catch方法每次执行完毕后会返回一个 新的promise对象

		let promise = new Promise((resolve, reject) => {
            reject()
        })
        let p1 = promise.catch(function () {
            console.log('失败1');
        })
        console.log(p1);
        console.log(p1 === promise);

在这里插入图片描述

6.和then方法一样, 上一个promise对象 也可以 给 下一个promise 成功的 传递参数

注意点:无论是在上一个promise对象成功的回调还是失败的回调传递的参数,
都会传递给下一个promise对象成功的回调

	let promise = new Promise(function (resolve, reject) {
        reject();
    });
    let p2 = promise.catch(function () {
        console.log("失败1");
        return "it666";
    });
    p2.then(function (data) {
        console.log("成功2", data);
    }, function (data) {
        console.log("失败2", data);
    });
    /*
		执行结果：
			失败1
			成功2，it666
	*/

7.和then一样, catch方法如果 返回的是一个 Promise对象 , 那么会将返回的Promise对象的执行结果中的值传递给下一个 catch方法

		let promise = new Promise(function (resolve, reject) {
            reject();
        });
        let ppp = new Promise(function (resolve, reject) {
            // resolve("1111");
            reject("abcd");
        });
        let p2 = promise.catch(function () {
            console.log("失败1");
            return ppp;
        });
        p2.then(function (data) {
            console.log("成功2", data);
        }, function (data) {
            console.log("失败2", data);
        });
        /*
		执行结果：
			失败1
			失败2 abcd
		*/

8.和then方法第二个参数的区别在于, catch方法可以捕获上一个promise对象then方法中的异常

then方法中

		let promise = new Promise(function (resolve, reject) {
            resolve();
        });
        promise.then(function () {
            console.log("成功");
            xxx
        }, function () {
            console.log("失败");
        });

在这里插入图片描述
catch方法中：

		let promise = new Promise(function (resolve, reject) {
            resolve();
        });
        promise.then(function () {
            console.log("成功");
            xxx
        }).catch(function (e) {
            console.log("失败", e);
        });

在这里插入图片描述

学习笔记❥(^_-)

苏Sue酥
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何优雅的让小程序的request请求支持callback & Promise的写法
webfunny2020的博客
04-24 385
前言 随着Promise在被广泛的使用和解决回调地狱的问题，以至于我们只要在发ajax请求的时候就会想起来去使用它。最近在使用小程序的请求request就想当然的使用then的方式来获取结果，然并卵。。。 于是就去小程序官网巴拉下资料小程序文档链接， 仔细翻阅得到结果如下： 异步 API 返回 Promise 基础库 2.10.2 版本起，异步 API 支持 callback & promise 两种调用方式。当接口参数 Object 对象中不包含 success/fail/complete 时将默
promise的基本用法和案例
m0_71753445的博客
07-09 911
promise解决回调地狱
request-then:请求与 thenpromise 的混搭
07-04
请求然后 与混搭 安装 npm install request-then --save 例子 var request = require ( 'request-then' ) ; request ( 'http://example.com' ) . then ( function handleResponse ( response ) { console . log ( response ) ; } , function handleError ( error ) { console . log ( error ) ; } ) ;
axios基本使用
攻城狮
05-21 1万+
Get请求 后端发送的json数据，显示到浏览器上 使用Axios发送get的不带参数请求 首先引入axios <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 编写JavaScript代码 <script> axios.get('/teachers/findByPage') .then(function (response) {
es6： promise 对象 和 then() 的用法
wsq926的博客
07-02 8794
&lt;script&gt; const request = function(){ var _this = this; let num = Math.round(Math.random()*100)/100; console.log( num ); return new Promise( (resolve, reject) =&gt; { setTimeout(funct...
request模块使用大全
成都_杨洋
03-29 604
一、Request模块 虽然Python的标准库中urllib模块已经包含了平时我们使用的大多数功能，但是它的API使用起来让人感觉不太好，而Request自称“HTTP for Humans”，说明使用更简洁方便。 　　Request继承了urllib的所有特性。Request支持HTTP连接保持和连接池，支持使用cookie保持会话，支持文件上传，支持自动确定相应内容的编码，支持国际化的URL...
Promise的基本实现和使用讲解
08-12
Promise的基本实现和使用讲解
Promise Promise.all 的使用
03-02
1.解决图片上传是否成功 2.图片上传顺序 3.Primise.all 的使用练习 4.同队列类型的请求也可使用
js代码-promise的基本使用
07-14
js代码-promise的基本使用
js代码-Promise基本使用2
07-16
js代码-Promise基本使用2
处理饼图难以绑定调用接口后的数据（then作用域外使用其中的数据）
weixin_46037781的博客
10-11 302
一、说下我们这个pie（饼图坑爹之处） 它有两种data绑定方式 直接绑定到data里 <my-chart-pie :data="pieData" style="height:330px" > data() { return { pieData: { columns: ['渠道', '访问量'], rows: [ ['直接访问', 320], ['邮件营销', 302], [
如何获取.then的返回值_仅仅知道如何终止XHR请求，或许对你来说是不够的！
weixin_39776298的博客
11-22 588
TLDR:当我们需要的时候，我们可以通过AbortController接口来终止一个或者多个请求。前言到目前为止，我们有两个常用的基本的手段去发送请求进而局部刷新页面内容，其一是XMR(XMLHttpRequest)，其二是fetch，我们一个个说XHR对于XHR，我们或许已经很熟悉了，当我们想要发送一个请求的时候，我们可以这样做：const 当我们由于某种原因(比如重复请求)想要终止它的时候，我...
request 请求类封装
m0_72313625的博客
12-05 5989
request 请求数据的封装和相对应的使用
request 请求封装返回数据
企业数字化转型卫淼全栈技术工作室
04-29 563
把request简单封装下： request(num) { //list=> res数据库返回数据 const list = uni .request({ url: this.$baseUrl + "SelGetValueByList/" + num, }) .then((data) => { //data为一个数组，数组第一项为错误信息，第二项为返回数据
then 微信小程序_微信小程序踩坑系列——从wx.request谈谈异步处理
weixin_42535720的博客
01-11 1095
见到wx.request的第一眼，就让我想起了$.ajax这东西，使用起来确实有很多不方便，不能忍，幸好小程序是支持ES6语法的，所以可以使用promise稍加改造。先来说说wx.request为什么不能忍。铺垫：“看得见却抓不住“的异步请求123456789101112131415161718192021222324Page({data: {myData: ''},// loadMyData函数...
《ES6标准入门》（六）之Promise对象2——then()和catch()方法
热门推荐
眼里长着太阳，笑里全是坦荡
07-07 10万+
1.Promise.prototype.then()方法Promise 实例具有then方法，也就是说，then方法是定义在原型对象Promise.prototype上的。它的作用是为 Promise 实例添加状态改变时的回调函数。then方法的第一个参数是resolved状态的回调函数，第二个参数（可选）是rejected状态的回调函数。then方法返回的是一个新的Promise实例（注意，不是...
接口请求及状态管理过程（ 播放多个视频）
Gyanga的博客
03-26 378
组件 index1-videoList.vue 中： methods() 中： ⭐分发Action（action内可执行异步操作） ⭐⭐fix：{ }中传入data（请求参数）向后端请求数据 ps: .then() 为异步执行，执行完.then()前的内容再执行then()内部的程序 Vuex子模块index1.js中： actions中： ①getMerchantVideos （api接口文件index1.js中的方法） 在request.js文件中通过使用一个函数返回的对象，构造函数Prom
deferred.then()的链式操作
weixin_30399055的博客
10-19 140
var request = $.ajax( url, { dataType: "json" } ), chained = request.then(function( data ) { return $.ajax( url2, { data: { user: data.userId } } ); //注意，这里返回了另外一个deferred对象， }); ...
深入浅出dojo/request
Dojo中文博客
09-18 1万+
难度：中等Dojo版本：1.7原作者：Bryan Forbes译者：Oliver ([email protected])原文链接：http://www.sitepen.com/blog/2012/08/21/introducing-dojorequest/随着Dojo向着2.0大步迈进，我们已开始致力于为开发人员提供能在任何JavaScript环境下保持高效生产力的工具。这意味着我们所创建的A
promise基本语法
最新发布
09-01
promise基本语法如下： 1. 创建Promise对象： ```javascript const promise = new Promise((resolve, reject) => ...以上是Promise基本语法的简单示例。在实际应用中，可以根据具体需求进行更复杂的操作和错误处理。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值