Promise详解

最新推荐文章于 2023-07-11 17:54:23 发布
最新推荐文章于 2023-07-11 17:54:23 发布
阅读量300 收藏 2
点赞数
分类专栏： js 文章标签： javascript node.js vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47794734/article/details/120205774
版权

一、Promise

(1) 为什么需要promise

需求：通过ajax请求id，再根据id请求用户名，再根据用户名获取email

  1. 回调地狱

    在回调函数中嵌套回调

    Promise解决了回调地狱

//发送ajax请求
$.ajax({
	type:'GET',
	url:'./data1.json',
	success:function(res){		//response,result
		const {id} = res 		//对象解构赋值
		console.log(res)		//Object(id:1)
		console.log(id)
		
		$ajax({
            type: 'GET',
            url: './data2.json',
            data: {id}, 		//相当于id:id
            success: function(res) {
            	const {username} = res 
                console.log(res)
                
                //再根据username获取email
                $.ajax({
                	type:'GET',
                	url:'./data3.json',
                	data:{username},
                	success:function(res){
                		console.log(res)
                	}
                })
            }
        })
	}
})

//data1.json
{
	"id":1
}

//data2.json
{
	"username":"xiaopang"
}

//data3.json
{
	"email":"xiaopang@163.com"
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LU8WIvNt-1631179393849)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\1631153117632.png)]

（2）Promise的基本使用

Promise是一个构造函数，通过new 关键字实例化对象

语法：new Promise((resolve, reject ) => { })

  • ​ Promise 接受一个函数作为参数

  • 在参数函数中接受两个参数

    ○ resolve：成功函数

    ○ reject：失败函数

    const p = new Promise((resolve,reject) => {})
console.dir(p)

promise实例有两个属性：

  • state：状态
  • result：结果
1）promise的状态

第一种状态：pending（准备，待解决，进行中）

第二种状态：fulfilled（已完成，成功）

第三种状态：rejected（已拒绝，失败）

2）promise状态的改变

通过调用resolve()和reject() 改变当前promise对象的状态

const p = new Promise((resolve,reject) => {
	//resolve()函数：调用函数，使当前promise对象的状态改成fulfilled
	resolve()
})
console.dir(p) //fulfilled

const p = new Promise((resolve,reject) => {
	//resolve()函数：调用函数，使当前promise对象的状态改成fulfilled
	//reject()函数：调用函数，使当前promise对象的状态改成rejected
	reject()
})
console.dir(p) //rejected
  • resolve()函数：调用函数，使当前promise对象的状态改成fulfilled
  • reject()函数：调用函数，使当前promise对象的状态改成rejected

promise 状态的改变是一次性的(如果我调用resolve() 把状态改成fulfilled 然后再调用reject() 此时promise的状态也不会被改变)

3）promise
const p = new Promise((resolve,reject) => {
    //通过调用resolve，传递参数，改变当前promise对象的结果
    resolve('成功的结果')
} )
console.dir(p)

const p = new Promise((resolve,reject) => {
    //通过调用resolve/reject，传递参数，改变当前promise对象的结果
    reject('失败的结果')
} )
console.dir(p)

( 3 ) Promise的方法

1) then 方法
const p = new Promise((resolve,reject) => {
    resolve('成功的结果')
    //reject('失败的结果')
})

//then方法函数
//参数 
	//1.是一个函数
	//2.还是一个函数
//返回值：是一个promise对象
p.then(( ) => {
    //当promise的状态是fulfilled时，执行
    console.log('成功时调用' , value)//成功时调用  
}, ( ) => {
    // 当promise的状态是rejected时，执行
    console.log('失败时调用',reson)//失败时调用   
})
console.dir(p)

const p = new Promise((resolve,reject) => {
    resolve('成功的结果')
    //reject('失败的结果')
})

//then方法函数
//参数 
	//1.是一个函数
	//2.还是一个函数
//返回值：是一个promise对象
p.then(( value ) => {
    //当promise的状态是fulfilled时，执行
    console.log('成功时调用' , value)//成功时调用  成功的结果
}, ( reson ) => {
    // 当promise的状态是rejected时，执行
    console.log('失败时调用',reson)//失败时调用   失败的结果
})
console.dir(p)

  • 在then方法的参数函数中，通过形参使用promise对象的结果

    then方法返回一个新的promise实例，状态是pending
    const p = new Promise((resolve,reject) => {
    resolve('成功的结果')
    //reject('失败的结果')
})

const t = p.then(( value ) => {
    //当promise的状态是fulfilled时，执行
    console.log('成功时调用' , value)//成功时调用  成功的结果
}, ( reson ) => {
    // 当promise的状态是rejected时，执行
    console.log('失败时调用',reson)//失败时调用   失败的结果
})
//链接操作
//new Promise((resolve,reject) => {}).then().then()
console.dir(t)
    promise的状态不改变，不会执行then里面的方法
    //如果promise的状态不改变，then里面的方法不会执行
new Promise((resolve,reject) => {
	
}).then((value) => {
	console.log('成功')
},(reason) => {
	console.log('失败')
}).then((value) => {
    console.log('成功')
},(reson) => {
    console.log('失败')
}
        
//改造   跟上述一样
const p = new Promise((resolve,reject) => {
 
})

const t = p.then((value) => {
    console.log('成功') 
},(reson) => {
    console.log('失败')
}

t.then((value) => {
    console.log("成功2",value)
},(reson) => {
    console.log("失败2")
})
    在then方法中，通过return将返回的promise实例改为fulfilled状态
    const p = new Promise((resolve,reject) => {
    resolve()
})

const t = p.then((value) => {
    console.log('成功') //①成功
    //使用return 可以将t实例的状态改成fulfilled
    return 123
},(reson) => {
    console.log('失败')
}

t.then((value) => {
    console.log("成功2",value)//②成功2 123
},(reson) => {
    console.log("失败2")
})
    如果在then方法中，出现代码错误，会将返回的promise实例改为rejected状态
const p = new Promise((resolve,reject) => {
    resolve()
})

const t = p.then((value) => {
    console.log('成功')
     //使用return 可以将t实例的状态改成fulfilled
   //return 123
    
    //如果这里的代码出错，会将t实例的状态改成rejected
    console.log(a)   //a没有定义  会报错
},(reson) => {
    console.log('失败')
}

t.then((value) => {
    console.log("成功2",value)
},(reson) => {
    console.log("失败2",reson)//失败2   a is not defined
})
2）catch方法
//新产生的promise实例的状态是pending状态
const p = new Promise((resolve,reject) => {
    //1.reject()
    //2. console.log(a)
    throw new Error('出错了')//也可以自己抛出一个错误
})

//catch中的参数函数在什么时候被执行？
	//1. 当promise的状态改为rejected时，被执行
	//2. 当promise执行体中出现代码错误时，被执行
	//3. 当promise执行体中出现 自抛错误 ，被执行
p.catch((reson) => {
    console.log('失败',reson)
})
console.log(p)
promise最常见的写法：
new Promise((resolve,reject) => {
    
}).then((value) => {
    //成功时被执行
    console.log(value)
}).catch((reson) => {
    //失败时被执行
    console.log(reson)
})

（ 4 ）用promise解决回调地狱

$.ajax({
	type:'GET',
	url:'data1.json',
	success: function(res){
		console.log(res)
	}
})


//data1.json
{
	"id":1
}

//用promise解决回调地狱

new Promise((resolve,reject) => {
	$.ajax({
	type:'GET',
	url:'data1.json',
	success: function(res){
        //修改promise的状态为成功，修改promise的结果res
		resolve(res)
	},
     error:function(res){
         //修改promise的状态为失败，修改promise的结果res
         reject(res)
     }
})
}).then((value) => {
    //console.log(value) //id:1
    const {id} = data //对象解构
    return new Promise((resolve,reject) => {
      $.ajax({
        type:'GET',
        url:'data2.json',
        data:{id}
        success: function(res){
            //修改promise的状态为成功，修改promise的结果res
            resolve(res)
        },
         error:function(res){
             //修改promise的状态为失败，修改promise的结果res
             reject(res)
         }
        })
        })
}).then((data) =>{
    //console.log(data)//{username:"xiaopang"}
    const {username} = data
    return new Promise((resolve,reject) => {
        $.ajax({
            type:'GET',
            url:'data3.json',
            data:{username},
            success:function(res){
              console.log(res)//{email:"xiaopang@163.com"}
            }
        })
    })
})

//data1.json
{
	"id":1
}
//data2.json
{
    "username":"xiaopang"
}
//data3.json
{
    "email":"xiaopang@163.com"
}

//封装函数解决回调地狱
function getData(url,data = {}){
    return new Promise((resolve,reject) => {
    $.ajax({
        type:'GET',
        url:url,
        data:data,
        success: function(res){
            resolve(res)
        },
        error: function(res){
            reject(res)
        }
    })
   })
}

getData('data1.json')
    .then((data) => {
    const {id} = data //对象解构
    return getData('data2.json',{id})
	})
    .then((data) => {
    const {username} = data //对象解构
    return getData('data3.json',{username})
})
	.then((data) => {
    consol.log(data)
})
Alley_h.
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Promise的使用详解
酒客的博客
12-23 1486
Promise内容详解–知识点整理 异步任务的处理 ​ 在ES6出来之后，有很多关于Promise的讲解、文章，也有很多经典的书籍讲解Promise。虽然等你学会Promise之后，会觉得Promise不过如此，但是在初次接触的时候都会觉得这个东西不好理解； 那么这里我从一个实际的例子来作为切入点： 我们调用一个函数，这个函数中发送网络请求（我们可以用定时器来模拟）； 如果发送网络请求成功了，那么告知调用者发送成功，并且将相关数据返回过去； 如果发送网络请求失败了，那么告知调用者发送失败，并且告知错误信息
promise详解
A20201130的博客
03-23 1万+
一、promise含义 Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。 所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。 二、异步和回调 异步处理的模型：ES
`Promise`全面解析
weixin_47267628的博客
09-20 1661
1.抽象表达Promise是一门新的技术（ES6规范）Promise是JS中进行异常编程的新解决方案备注：旧方案是单纯使用回调函数【】2.具体表达Promise是一个构造函数Promise对象用来封装一个异步操作并可以获取其成功/失败的结果值。
ECMAScript Javascript Promise 详解
03-20
ECMAScript Javascript Promise 详解
promise详解，手动实现以及上万字笔记.rar
08-16
里面主要是手写的promise实现过程，以及promise的详解笔记，对于初接触promise和进阶的前端人员来说是相当值得一看的
Javascript Promise用法详解
10-18
主要介绍了Javascript Promise用法详解,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
【JavaScript源代码】JavaScript中的Promise详解.docx
12-29
JavaScript中的Promise详解 　目录　Promise的基本用法：1、创建Promise对象2、Promise 方法总结　Promise的基本用法：　1、创建Promise对象2、Promise 方法　1、创建Promise对象　2、Promise 方法　总结　Promise是...
Angularjs Promise实例详解
10-18
Promise是一个构造函数，自己身上有all、reject、resolve这几个异步方式处理值的方法，原型上有then、catch等同样很眼熟的方法，下面通过实例代码给大家讲解angularjs promise 的相关知识，感兴趣的朋友一起看看吧
vue+axios+promise实际开发用法详解
10-17
主要介绍了vue+axios+promise实际开发用法详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Promise函数的详解
01-20
Promise函数是异步编程的一个解决方案，相对传统的解决方案，他更合理和强大。Promise的本意是“承诺”、“许诺”的意思。承诺在未来会执行某个操作的函数，就是Promise函数。其基本结构如下： var promise = new ...
Promise 全部内容详解
qq_43610311的博客
02-11 2095
Promise详解,，包括使用流程。常见方法等等
Promise详解大全：介绍、九个方法使用和区别、返回值详解
最新发布
qq_53669554的博客
07-11 1万+
Promise详解大全：对promise介绍、九个方法的使用和不同点、以及相对应返回值的解释
JavaScript进阶（二十五）：Promise 详解
热门推荐
IT全栈 华强工作室
12-22 3万+
Promise意在让异步代码变得干净和直观，让异步代码变得井然有序。 Promise在设计上具有原子性，即只有三种状态：等待（Pending）、成功（Fulfilled）、失败（Rejected）。在调用支持Promise的异步方法时，逻辑变得非常简单，在大规模的软件工程开发中具有良好的健壮性。 （1）基本语法 创建Promise对象： 要想给一个函数赋予Promise能力，就要先创建一个Prom...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值