js 中 async/await 的用法

async和await定义

	async 是异步的意思,而 await 是等待的意思,await 用于等待一个异步任务执行完成的结果。
	1.async/await 是一种编写异步代码的新方法(以前是采用回调和 promise)。
	2. async/await 是建立在 promise 的基础上。
	3. async/await 像 promise 一样,也是非阻塞的。
	4. async/await 让异步代码看起来、表现起来更像同步代码。

使用场景

在实际开发中,如果你遇到了等第一个请求返回数据完,再执行第二个请求(可能第二个请求要传的参数就是第一个请求接口返回的数据)这个问题,此时我们就要学会使用async/await!

代码

	const datas = async ()=> {
	  await request.selectPies(Route.path.split('/')[3]).then(res=>{
	  	states.ids = res.obj
	  })
	  //查询发帖子用户信息
	  await request.selectUsers(states.ids).then(res=>{
	    console.log(res.obj)
	  })
	}
	datas()

一、async

	async function testAsync(){		//带async关键字的函数,是声明异步函数,返回值是promise对象,
		return 'Hello async';
	}
	testAsync();					//打印结果:Promise {<fulfilled>: 'Hello async'}

二、获取异步函数的数据

  • 方法1:
	async function testAsync(){		
		return 'Hello async';
	}
	var result = testAsync();
	result.then((data)=>{
	    console.log(data);			//Hello async
	})
  • 方法2:
	function getData(){
		return 'Hello async';
	}
	async function test(){
		var d = await getData();	//await 是等待异步方法执行完成,可以获取异步方法里面的数据,但是必须得用在异步方法里面
	}
	test();							//Hello async

三、应用场景

  • 先请求接口1,获取到接口1返回结果后,将其作为接口2的参数,再去请求接口2
	async function getD(){
		var a = await getDataF()	//接口1
		var b = await getDataS(a)	//接口2
		console.log(b);				//接口2返回的值
	}
	getD()

四、注意事项

  1. async 用于申明一个 function 是异步的,而 await 用于等待一个异步方法执行完成
  2. await只能在async函数中使用,不然会报错
  3. async函数返回的是一个状态为fuifilled的Promise对象
  4. 类似于排队买东西,一个人结完账后才能轮到下个人,在async函数中,await规定了异步操作只能一个一个排队执行,从而达到用同步方式,执行异步操作的效果

另一个例子

methods:{
	async fn() {
	  await this.getItem();
	  this.search();
	}
}

  • 7
    点赞
  • 29
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript,异步调用一直是一个重要的话题。许多开发者已经习惯使用Promise、回调函数等方式来处理异步代码。但是,使用async/await语法可以让异步代码更加简洁易读。 async/await是ES2017(ES8)的标准,它们允许我们以同步的方式编写异步代码。async/await基于Promises,它们提供了一种更容易理解和使用的方式来解决异步交互。 1. async 函数 要使用 async/await 异步调用,必须先创建一个async 函数, 像这样: ```javascript async function myAsyncFunction() { // code goes here } ``` async 函数是在定义时就立即执行的。这可以让我们确保异步代码在异步执行之前被定义。 2. await 关键字 在async函数,调用异步操作时需要await关键字。它可以使函数停止执行,等待异步操作完成,然后返回异步操作的结果。 例如,可以等待一个Promise对象完整处理后返回结果,像这样: ```javascript async function myFunction() { const result = await myAsyncOperation(); console.log(result); } ``` 在这个例子里,myAsyncOperation()可能需要很长时间才能完成。await确保在异步操作返回之前,不会执行代码的后续部分。当操作完成时,async函数才会继续执行。 3. 错误处理 回调函数的错误处理有时非常麻烦。但是,使用async /await,可以使用try...catch块十分方便地处理错误。 例如,如果await的异步函数失败,可以使用try/catch语句捕获该错误。 ```javascript async function myFunction() { try { const result = await myAsyncOperation(); console.log(result); } catch (error) { console.error('There was a problem with the async operation:', error); } } ``` 在这个例子里,如果myAsyncOperation 函数有一个错误,将控制台记录相应错误信息。 总而言之,async/await 语法是一种很好的方式来处理异步操作。不仅它可以使异步代码更加简洁易读,同时也提供了错误处理和其他便利功能,通过这种方式,我们可以更加有效地管理我们的异步代码。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值