# 5、接口调用-async/await用法 * [5.1 async/await的基本用法 （单个）](https://www.kancloud.cn/zheng1234/vuejs/2393792#51_asyncawait___1) * [5.2 async/await处理多个异步请求 （多个）](https://www.kancloud.cn/zheng1234/vuejs/2393792#52_asyncawait___42) ## 5.1 async/await的基本用法 （单个） ● async/await是ES7引入的新语法，可以更加方便的进行异步操作 ● async关键字用于函数上(async函数的返回值是Promise实例对象) ● await关键字用于async函数当中(await可以得到异步的结果) ~~~ asyna function queryData (id) { const ret = await axios.get( ' /data') ; re turn ret ; } queryData. then (ret=> { console. log (ret) }) ~~~ 代码分析 1 ~~~ axios.defaults.baseURL = 'http://127.0.0.1:3000'; // axios.get('adata').then(function(ret){ // console.log(ret.data) // }) // async function queryData(){ // var ret = await axios.get('adata'); // //console.log(ret.data) // return ret.data; // } async function queryData() { var ret = await new Promise(function(resolve, reject) { setTimeout(function() { resolve('hi') }, 2000) }) //console.log(ret.data) return ret; } queryData().then(function(data) { console.log(data) }) ~~~ ## 5.2 async/await处理多个异步请求 （多个） 多个异步请求的场景 ~~~ async function queryData (id) { const info = await axios. get(' /async1') ; const ret = await axios.get( 'async2?info= '+info.data) ; return ret; } queryData. then (ret=> { console. log (ret) }) ~~~ 多个异步请求 代码分析 ~~~ //async和await处理多个异步任务 axios.defaults.baseURL = 'http://localhost:3000'; async function queeryData() { var info = await axios.get('async1'); var ret = await axios.get('async2?info' + info.data); return ret.data; } queeryData().then(function(data) { console.log(data) }) ~~~