vue axios同步请求的案例解析

先看异步

         test2(){
          console.log("111")
            // 模拟1s后返回数据
            setTimeout(()=>{
              console.log("222")
            },1000)
          console.log("333")
          },

执行结果:

111    333   222

再看个异步的例子:

test3(){
          console.log("业务1开始执行")
          const  rs =   new Promise((resolve, reject) => {
            console.log("业务2开始执行")
            // 模拟1s后返回数据
            setTimeout(()=>{
              console.log("业务2 结束")
              resolve("返回结果");
            },1000)
          });
          console.log("业务3开始执行");

          const  rs2 =   new Promise((resolve, reject) => {
            console.log("业务4开始执行")
            // 模拟1s后返回数据
            setTimeout(()=>{
              console.log("业务4 结束")
              resolve("返回结果");
            },1000)
          });
          console.log("业务5开始执行");

        },

业务2、4是异步的,其他业务早就执行完了,业务2、4最后才执行完。 

同步怎么做

 async test3(){
          console.log("业务1开始执行")
          const  rs =  await new Promise((resolve, reject) => {
            console.log("业务2开始执行")
            // 模拟1s后返回数据
            setTimeout(()=>{
              console.log("业务2 结束")
              resolve("返回结果");
            },1000)
          });
          console.log("业务3开始执行");

          const  rs2 =   new Promise((resolve, reject) => {
            console.log("业务4开始执行")
            // 模拟1s后返回数据
            setTimeout(()=>{
              console.log("业务4 结束")
              resolve("返回结果");
            },1000)
          });
          console.log("业务5开始执行");

        },

        唯一的区别是整个方法加上async,业务2加上await,因此业务2是同步的,要等业务2执行完才继续往下走。

  而业务4没加关键字await,因此还是异步执行。

 OK,同步操作就这样搞!!!

另外,可以用resolve获取Promise里的返回值

猜你喜欢

转载自blog.csdn.net/x18094/article/details/120212862