vue的异步操作,vue中调用接口是异步进行的吗
本文主要介绍了Vue中的同步调用和异步调用，有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。
目录
Vue的同步调用和异步调用Promise实现异步调用async /await方法实现同步调用Vue的同步和异步问题基本语法示例
Vue的同步调用和异步调用
Promise实现异步调用
异步调用，添加两个方法A和B，并在mounted中调用。观察客户端，不按方法执行的顺序输出，用Promise实现异步调用。
观察客户端，不按方法执行的顺序输出，用Promise实现异步调用。
async /await方法实现同步调用
Async和await可以和promise一起使用实现同步调用，在nuxt.js中使用async/await实现同步调用效果。
观察服务器控制台，发现按照A和B的调用顺序输出1和2，使用async/await实现同步调用。
Vue同步和异步的问题
我想到写这个问题是因为我在工作中遇到了一些相关的问题，最后我用ES7的async-await解决了这个问题。话不多说，直奔主题。
基本语法
async functionbasicDemo() {
let result=await math . random()；
console.log(结果)；
}
basic demo()；
//0.6484863241051226//Promise {[[Promise status]]: resolved ，[[PromiseValue]]: undefined}
上面的代码是async-await的基本使用形式。有两个不熟悉的关键字async和await，函数执行的结果好像是返回一个promise对象。
asyncasync函数demo01(){
返回123；
}
demo01()。然后(val={
console . log(val)；//123});
如果async定义的函数有返回值，返回123；相当于Promise.resolve(123)，不声明返回相当于执行promise . resolve()；
Awaitawait可以理解为async wait的缩写。Await必须出现在异步函数中，不能单独使用。
functionnotasynfunc(){
await math . random()；
}
notasynfunc()；//未捕获的语法错误：意外的标识符
Await后面可以跟任何JS表达式。虽然await可以等待许多类型的事情，但它的主要意图是等待承诺对象的状态被解析。如果await是一个promise对象，异步函数将停止执行，等待promise的解；如果是正常表达式，会立即执行。
函数睡眠(秒){
返回新承诺((解决，拒绝)={
setTimeout(()={
化解(‘充足睡眠~’)；
}，第二)；
})
}functionnormalFunc(){
console . log( normal func )；
}async functionawaitDemo(){
await normal func()；
console.log(有事，~ ~ )；
假设结果=等待睡眠(2000)；
console.log(结果)；//两秒钟就会打印出来}
awaitDemo()
希望大家能通过上面的演示理解我的话。
实例
例如，您有三个需要发生的请求。第三个请求取决于第二个请求的解构，第二个请求取决于第一个请求的结果。如果用ES5实现，会有三层回调，如果用Promise实现，至少需要三层then。一个是代码的横向开发，一个是纵向开发。今天指的是async-await的实现~
我们仍然使用setTimeout来模拟异步请求。
函数sleep(秒，参数){
返回新承诺((解决，拒绝)={
setTimeout(()={
解决(参数)；
}，第二)；
})
}异步函数测试(){
假设结果1=等待睡眠(2000，请求01 )；
假设结果2=等待睡眠(1000，“请求02”结果1)；
假设结果3=等待睡眠(500，“请求03”结果2)；
console . log(` $ { result 3 } $ { result 2 } $ { result 1 } `)；
}
test()；
错误处理
上面的代码似乎给出了所有的resolve情况，那么在拒绝的时候我们应该怎么做呢？
函数睡眠(秒){
返回新承诺((解决，拒绝)={
setTimeout(()={
拒绝(‘想睡觉~’)；
}，第二)；
})
}async functionerrorDemo(){
假设结果=等待睡眠(1000)；
console.log(结果)；
}
error demo()；//VM 706:11 un count(In promise)想睡觉~//为了处理Promise.reject的情况，我们要用try catch把代码块包装起来，把async functionerrorDemoSuper(){
尝试{
假设结果=等待睡眠(1000)；
console.log(结果)；
} catch (err) {
console . log(err)；
}
}
error demo super()；//想睡觉~
小心你的并行处理!!!
为什么我在这里加了三个感叹号~，因为对于新手来说，不小心把ajax并发请求送进了一个阻塞的同步操作，所以我真的是在工作中写了这段代码。如果等待承诺，Await就会停止。生意就是这样。我有三个异步请求要发送，它们互不相关。我只需要在所有请求完成后清除接口的加载。我刚学完async await。太开心了，到处都用~
函数睡眠(秒){
返回新承诺((解决，拒绝)={
setTimeout(()={
解决(“请求完成！”math . random())；
}，第二)；
})
}异步函数bugDemo(){
等待睡眠(1000)；
等待睡眠(1000)；
等待睡眠(1000)；
console.log(清除加载~ )；
}
bug demo()；
加载会等待所有请求完成，然后才会被清除。但是仔细观察浏览器的timeline请求是在一个结束后发送的(如果观察效果请发送一个真实的ajax请求)。
那么，正常的处理是怎样的呢？
async functioncorrectDemo(){
设p1=睡眠(1000)；
设p2=睡眠(1000)；
设p3=睡眠(1000)；
wait Promise.all([p1，p2，P3])；
console.log(清除加载~ )；
}
correct demo()；//清空加载~
以上。
嗯，这些只是个人经历。希望给大家一个参考，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。