Vue中async和await
前⾔
async 和 await 在 vue 和 .Net 中的⽤法基本⼀致。
async 表⽰该⽅法是异步的，在 vue 中 async 标记的⽅法返回⼀个 promise，在.Net中则返回⼀个 Task。vue中的 Promise 其实就相当于 .Net 中的 Task。都是任务的概念。
await ⽤在返回 Promise 或 task 的⽅法调⽤前，表⽰将等待任务的完成。重要的是不会阻塞线程。
同步、异步、阻塞和⾮组赛
对于这⼏个概念的解释，通常都是⽤烧⽔这个例⼦。
同步阻塞：⽼张烧⽔，将⽔壶放在炉⼦上，然后站在那⾥等待⽔壶烧开。
同步⾮阻塞：⽼张烧⽔，将⽔壶放在炉⼦上，然后去客厅看电视，然后时不时的去看看⽔有没有烧开。
异步阻塞：⽼张使⽤响⽔壶来烧⽔，将⽔壶放在炉⼦上，然后站在那⾥等待⽔壶烧开，但是不⽤每隔⼀段时间去看⽔开，⽽是⽔烧开后，⽔壶会⾃动通知他。异步⾮阻塞：⽼张使⽤响⽔壶来烧⽔，将⽔壶放
在炉⼦上，然后就去客厅看电视，然后⽔烧开后，⽔壶会⾃动通知他。
同步和异步：
同步就是烧⽔，需要⾃⼰去轮询(每隔⼀段时间看看⽔烧开了没有)
异步就是⽔烧开了，⽔壶会⾃动通知你，你就可以回来处理烧开的⽔了。
阻塞和⾮阻塞：
阻塞：就是烧⽔的同时，你不可以去⼲其它的事情。
⾮阻塞：就是烧⽔的同时，你可以去⼲其它事情，⽐如看电视，上⽹等等。
阻塞和⾮阻塞是相对于线程是否被阻塞。
async
在 Vue 中定义⼀个异步⽅法很简单，在函数前边加上 async 关键字即可。调⽤⽅法则和平时的调⽤⼀样。如：
async function getData(){
return "hello world!"
}
console.log(getData())
console.log("虽然我在后边，但是我先执⾏")
输出结果：
由此我们可以看到 async 返回的是⼀个 Promise 对象。但是要想获取⾥⾯的值，就需要借助 then 的调⽤链⽅法去获取。
async function getData(){
return "hello world!"
}
getData().then(result => {
console.log(result)
})
console.log("虽然我在后边，但是我先执⾏")
输出结果：
这就与我们想要的结果⼀致。
promise的特点：
⽆等待，在没有 await 的情况下执⾏ async 函数，它会⽴即执⾏，并⽴即返回⼀个 Promise 对象。
⽆阻塞，既然是⽴即返回，那么就不会阻塞后边的代码语句。
await
await 的含义为等待，⽤于等待⼀个异步⽅法的执⾏完成，只有异步⽅法执⾏完成后，才能继续执⾏后边的操作。
不过按来解释的话，await 操作符⽤于等待⼀个 Promise 对象.
语法：
[返回值] = await 表达式;
表达式：
⼀个 Promise 对象或任何要等待的值。
返回值：
返回 Promise 对象的处理结果。如果等待的不是 Promise 对象，则返回该值本⾝。
也就是说 await 可以指定任何对象。
描述：
await 表达式会暂停当前 async function 的执⾏，等待 Promise 处理完成。若 Promise 正常处理(fulfilled)，其回调的 resolve 函数参数作为 await 表达式的值，继续执⾏ async function。
若 Promise 处理异常(rejected)，await 表达式会把 Promise 的异常原因抛出。
另外，如果 await 操作符后的表达式的值不是⼀个 Promise，则返回该值本⾝。
如果返回的是⼀个Promise对象，await 会阻塞后边的代码，等待 Promise 对象 resolve，然后得到 resolve 的值，作为 await 表达式的结果。
因为会阻塞，所以这也就是为什么 await 需要放在 async ⽅法中的原因。async 不会造成阻塞，它内部所有的阻塞都被封装在⼀个Promise 中异步执⾏。
总结
async 会将后⾯函数的返回值封装成⼀个 Promise 对象，⽽ await 会等待这个 Promise 完成，并将其 resolve 的结果返回出来。
await和async使用方法

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。