axios的同步请求及Promise与Async/Await

1.axios的同步请求

注：我的代码是在vue 中的。

• 步骤一
  先写一个用axios请求的方法在methods中，并将其用return返回。
  我这里请求的是本地静态文件，网络请求亦同理。

Test() {
      return this.axios({
        url: '/test.json',
        method: 'get'
      }).then((res) => {
       		console.log('这是Test方法')
      })
    }

• 步骤二

调用Test()方法。

this.Test().then(
      res => {
        console.log('进到res')
      },
      rej => {
        console.log('进到rej')
      }
    )

这样执行过后，控制台会打印：

我们注意到了，他是进入了res这个代码块里，那么如何进入rej这个代码块呢？

• 步骤三
  进入rej代码块，需要对步骤一中的Test()方法进行改动:

Test() {
      return this.axios({
        url: '/test.json',
        method: 'get'
      }).then((res) => {
        console.log('这是Test方法')
        return new Promise.reject('错误')
      })
    }

是的，在console.log下面增加了一行代码，再来看看打印结果吧！

打印出来的就是rej而不是res了。

• 步骤四
  那么，怎么去同步发请求呢？其实经过上面三步，你应该已经学会了。这里汇总一下：

Test() {
      return this.axios({
        url: '/test.json',
        method: 'get'
      }).then((res) => {
        console.log('这是Test方法')
      })
    }
 Test1() {
      return this.axios({
        url: '/test.json',
        method: 'get'
      }).then((res) => {
        console.log('这是Test1方法')
      })
    }
 //依次发送Test、Test1请求
 this.Test().then(res => {
 	this.Test1()
},rej => {
	// 发生错误也发送请求
	this.Test1()
})

• 补充
  如果想将第一个请求的返回数据传递到第二个请求内，可以这么做：
  1.如果想走res，那么直接return返回的数据就好了:

Test() {
      return this.axios({
        url: '/test.json',
        method: 'get'
      }).then((res) => {
        console.log('这是Test方法')
        return res
      })
    }

2.如果想走rej，那么得在之前的reject括号里加上返回的数据:

Test() {
      return this.axios({
        url: '/test.json',
        method: 'get'
      }).then((res) => {
        console.log('这是Test方法')
        return Promise.reject(res)
      })
    }

返回之后，数据就可以在步骤二中的res或者rej获得了。

2.Promise同步

其实本质跟网络请求没有太大区别啦。

• 步骤一：
  同样先写一个Test方法:

Test() {
      return new Promise((resolve, reject) => {
         	console.log('测试')
      })
    }

• 步骤二
  如果是想走res过，就这么写：

Test() {
      return new Promise((resolve, reject) => {
         	console.log('测试')
         	resolve('测试res')
      })
    }

如果是想走rej过,就这么写：

Test() {
      return new Promise((resolve, reject) => {
         	console.log('测试')
         	reject('测试rej')
      })
    }

最后还是一样，去调用这个方法：

this.Test().then(
      res => {
        console.log('进到res',res)
      },
      rej => {
        console.log('进到rej',rej)
      }
    )

3.Async/Await

示例中是用Promise，当然也可以用于axios。

• 步骤1：创建一个返回Promise的对象，在其中执行异步操作setTimeout

function asyncFun(time) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(`耗时：${time / 1000}s`);
        }, time);
    });
}

• 步骤2：创建一个方法在function前加上async,我们将会在这个方法中去调用步骤1的方法。

async function asyncHandler() {
    console.log(await asyncFun(3000));
    const res = await asyncFun(1000);
    console.log(res);
    await asyncFun(2000).then((res) => {
        console.log(res);
    });
    return "执行完毕";
}

• 步骤3：我们调用步骤2的方法：

asyncHandler().then((res) => {
    console.log(res);
});

在步骤2中，我用了三种方式，将异步方法的结果打印出来：

1. 直接打印
2. 赋值后打印
3. 使用.then后将res打印
   
   我们可以发现，异步方法是按顺序执行的，而且步骤2的方法返回的仍然是一个Promise对象，因此我们在步骤3中使用了.then把执行完毕打印出来了。