Vue接口调用（三）async/await用法

async/await用法1. async/await的基本用法async/await是ES7引入的新语法，可以更加方便的进行异步操作async关键词用于函数上（async函数的返回值是Promise实例对象）await关键子用于async函数当中（await可以得到异步的结果）async function queryData(id) {const ret = await axios.get('/

XXXxxx光

15357人浏览 · 2022-04-06 08:12:24

XXXxxx光 · 2022-04-06 08:12:24 发布

Vue接口调用🔥

接口调用	地址
Vue接口调用（一）fetch用法	https://blog.csdn.net/m0_55990909/article/details/123957200
Vue接口调用（二）axios用法🔥	https://blog.csdn.net/m0_55990909/article/details/123981283
Vue接口调用（三）async/await用法🔥	https://blog.csdn.net/m0_55990909/article/details/123981292

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')
  }
})