Vue接口调用方式(三)async/await用法
2022-04-05 本文已影响0人
生命里那束光
async/await用法
1. async/await的基本用法
- async/await是ES7引入的新语法,可以更加方便的进行异步操作
- async关键词用于函数上(async函数的返回值是Promise实例对象)
- await关键子用于async函数当中(await可以得到异步的结果)
async function queryData(id) {
const ret = await axios.get('/data');
return ret;
}
queryData.then(ret=>{
console.log(ret)
})
示例:
// 配置请求的基准URL地址
axios.defaults.baseURL = 'http:localhost:3000';
//axios请求接口
axios.get('adata').then(function(ret){
console.log(ret.data)
})
//async请求接口 await后面是Promise实例对象
async function queryData() {
var ret = await axios.get('adata');
// console.log(ret.data)
return ret.data;
}
queryData().then(function (data) {
console.log(data)
})
//服务器端的接口
app.get('/adata', (req, res) => {
res.send('Hello axios!')
})
2. async/await处理多个异步请求
- 第一个异步请求的结果
- 可以作为第二个异步请求内部的参数,进行判断等数据操作。
- 形成链式关系
示例:
// 配置请求的基准URL地址
axios.defaults.baseURL = 'http://localhost:3000';
//async请求接口
async function queryData() {
var info = await axios.get('async1');
//axios传递给服务器/async2接口的info.data参数,用于接口内部判断
//传参格式:[ '地址?属性名=属性值' ]or [ ' 地址?对象= ' + '对象.属性名']
var ret = await axios.get('async2?info=' + info.data);
return ret.data;
}
queryData().then(function(data){
console.log(data)
})
//服务器端的接口
app.get('/async1', (req, res) => {
res.send('hello')
})
app.get('/async2', (req, res) => {
if (req.query.info == 'hello') {
res.send('async1的结果确实是hello')
} else {
res.send('error')
}
})