promise和async、await的用法

一、Promise

1、promise的含义

是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。

2、Promise的特点

(1)对象的状态不受外界影响,有三种状态:

pending(进行中)

fulfilled(已成功 调用resolve后promise进入fulfilled状态)

rejected(已失败 调用reject之后promise进入rejected状态)

resolve表示成功的状态;reject表示失败的状态;)

(2)一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能:

pending 变为 fulfilled。(从“未完成”变为“成功”)

pending 变为 rejected。(从“未完成”变为“失败”)

promise初始状态为pending

只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是Promise这个名字的由来,它的英语意思就是“承诺”,表示其他手段无法改变。

3、promise使用

基本用法

let pro = new Promise((resolve,reject) =>{
	if(true){
		resolve('成功')
	}else{
		reject('失败')
	}
})
//resolve对应then的回调结果
//reject对应catch的回调结果
pro.then(function(rst){
	console.log(rst);
}).catch(function(err){
	console.log(err);
})

链式操作
.then 是一个链式操作,也就是说 then 内部会返回一个promise对象,这个promise默认就是当前promise

let pro = new Promise(function(resolve,reject){
	setTimeout(() =>{
		resolve('成功');
	},2000);
})
pro.then(function(rst){
	console.log(rst);
	return '成功1';
}).then(function(rst){
	console.log(rst);
	return '哈哈哈哈哈哈哈';
}).then(function(rst){
	console.log(rst);
}).catch(function(err){
	console.log(err);
})

promise调用http数据

var p = new Promise(function(resolve,reject){
	$.ajax({
		type: 'method',
		url: 'url',
		//data: 'data',
		//dataType: 'json',
		success: function(response) {},
		error: function(err) {},
	})
})
p.then(function(rst){}).catch(function(err){});

二、async await

1、async和await是什么

async 是“异步”的意思,await 是等待的意思。所以很好理解 async 用于申明一个 异步的function(实际上是async function 对象),而 await 用于等待一个 异步任务执行完成的 结果。

注: await 只能出现在 async 函数中。

async 告诉程序这是一个异步操作,await 是一个操作符,即 await 后面是一个表达式。

async function a(){
	return 'hello async';
}
const result = a();
	console.log(result);

结果:
在这里插入图片描述
既然返回的是Promise 对象,所以在最外层不能直接获取其返回值,那么肯定可以用原来的方式:then() 链来处理这个 Promise 对象,如:

async function a(){
	return 'hello async';
}
const result = a();
	console.log(result);
a().then(v =>{
	console.log(v);  //hello async
})

结果:先打印 Promise 对象 ,后打印 hello async
在这里插入图片描述
await 操作符

await 表达式会暂停当前 async function 的执行,等待 Promise 处理完成。若 Promise 正常处理(fulfilled),其回调的 resolve函数的参数 作为 await 表达式的值,继续执行async function内的后面代码。若 Promise 处理异常(rejected),await 表达式会把 Promise 的异常原因抛出。另外,如果 await 操作符后的表达式的值如果不是一个 Promise,则返回该值本身。

await会暂停当前async 函数执行,并且await 后面是一个表达式,即这个await 等待的是一个表达式(这个表达式返回promise 对象或者一个具体的值):

(1)假如这个表达式返回的是一个Promise 对象, 那么它的返回值,实际上就是 Promise 的回调函数 resolve 的参数,如果这个Promise rejected 了,await 表达式会把 Promise 的异常抛出。

(2)假如这个表达式如果返回的是一个常量,那么会把这个常量转为Promise.resolve(xx),同理如果没有返回值也是Promise.resolve(underfind)

async function testAwait(){
	const data = await "hello await";
	console.log(data); //hello await
	return data;
}
console.log(testAwait()); //promise

结果:先打印 Promise 对象 ,后打印 hello await
在这里插入图片描述

async 告诉程序这是一个异步,awiat 会暂停执行async中的代码,等待 await表达式 后面的结果,等await
表达式后面的结果返回以后,继续执行 async函数内 后面的代码,在结果返回之前会继续执行 async函数之后
的代码。(可以查看代码打印顺序)

async 函数会返回一个Promise 对象,当 async 函数返回一个值时,Promise 的 resolve
方法会负责传递这个值;当 async 函数抛出异常时,Promise 的 reject 方法也会传递这个异常值。

await 操作符用于等待一个Promise 对象,并且返回 Promise 对象的处理结果(成功把resolve 函数参数作为await
表达式的值),如果等待的不是 Promise 对象,则用 Promise.resolve(xx) 转化

发布了10 篇原创文章 · 获赞 20 · 访问量 473

猜你喜欢

转载自blog.csdn.net/qq_45784580/article/details/104514416