美文网首页Vue全家桶
Vue接口调用方式(三)async/await用法

Vue接口调用方式(三)async/await用法

作者: 生命里那束光 | 来源:发表于2022-04-05 09:31 被阅读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')
      }
    })
    

    相关文章

      网友评论

        本文标题:Vue接口调用方式(三)async/await用法

        本文链接:https://www.haomeiwen.com/subject/miqksrtx.html