axios中如何进行同步请求(async+await)
作者：艾欢欢
axios进行同步请求(async+await)
介绍
Axios 是一个基于 promise 的 HTTP 库，它支持 Promise API。
像这样：
axios.post('getsomething').then(
res => {
// 进行一些操作
}
)而 async/await 是一种建立在Promise之上的编写异步或非阻塞代码的新方法。async 是异步的意思，而 await 是 async wait的简写，即异步等待。
所以从语义上就很好理解 async 用于声明一个 函数 是异步的，而await 用于等待一个异步方法执行完成。
那么想要同步使用数据的话，就可以使用 async+await 。
代码示例
模拟一次异步请求
// 假设这是我们要请求的数据
function getSomething(n) {
return new Promise(resolve => {
// 模拟1s后返回数据
setTimeout(() => resolve(222), 1000);
});
}
function requestSomething() {
console.log(111);
getSomething().then(res => console.log(res));
console.log(333);
}
requestSomething() //这个时候会输出 111，333，222
// 如果想要等数据返回后再执行后面的代码，那么就要使用 async/await
async function requestSomething() {
console.log(111);
// 这时something会等到异步请求的结果回来后才进行赋值，同时不会执行之后的代码
const something = await getSomething();
console.log(something)
console.log(333);
}
requestSomething() //这个时候会输出 111，222，333
axios使用async/await对promise进行优化
利用promise解决了发送ajax的回调地狱问题,是代码看起来简洁了许多
但是如果要按顺序发送多次请求，还是有些麻烦的，因为我们需要一直去.then来得到结果，所以在ES7中有了一种新的语法:async/await，可以更加方便的进行异步操作，先看一下上面的请求如果在axios中用这个语法来写是什么效果：
axios.defaults.baseURL = 'http://localhost:3000';
async function queryData() {
var ret = await axios.get('/data');
var ret1 = await axios.get('/data1');
var ret2 = await axios.get('/data2');
return [ret, ret1, ret2];
}
console.log(queryData());
第一行代码是给axios设置了一个公共请求路径localhost:3000;
代码看起来更加简洁,就像是同步执行一样,省略了.then取到结果的过程,
结果：
可以看到,得到的还是promise对象,同时按顺序拿到了三个请求任务的结果;
解释
1、axios基本用法
axios.get('http://localhost:3000/adata')
.then(function(ret){
// 注意data属性是固定的用法，用于获取后台的实际数据
// console.log(ret.data)
console.log(ret)
})
axios中数据存放在ret.data中,想要得到结果同样需要.then一下
2、async基本用法
async/await 处理异步操作：
- async函数返回一个Promise实例对象
- await后面可以直接跟一个 Promise实例对象
await + promise实例对象=要得到的结果
// async总结
//1, 有async标识的函数称之为 异步函数,
//2, 有async关键字出现,await可以不出现
//3, 有await出现,async必须出现
axios.defaults.baseURL = 'http://localhost:3000';
async function queryDate() {
// await的作用就是将异步函数变成同步操作
var ret = await axios.get('/adata')
console.log(ret.data);
}
queryDate();
结果：
也就是说,通过await可以直接取到promit实例对象的结果,而不用再.then来获取,这样一来,就相当于将异步的请求变成了同步任务;
这样的话我们回到最初的问题,按照一定的顺序来发送网络请求,下次请求需要用到上次请求所获取的数据. 现在如何实现呢?
接口是这样的:
想要的到 world,则必须携带async1请求得到的数据hello
axios.defaults.baseURL = 'http://localhost:3000/';
async function queryData() {
var info = await axios.get('async1');
console.log(info.data);
var ret = await axios.get('async2?info=' + info.data);
return ret.data;
}
queryData().then(function (data) {
console.log(data)
})
打印结果：
代码看着就很舒服
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。