VUE04_Promise的概述、常用API、静态方法、axios基于不同请求传参、拦截器、async/await用法(四)

简介: ⑩. async/await用法

⑩. async/await用法


①. async作为一个关键字放到函数前面


任何一个async函数都会隐式返回一个promise


②. await关键字只能在使用async定义的函数中使用


await后面可以直接跟一个Promise实例对象


await函数不能单独使用


③. async/await让异步代码看起来、表现起来更像同步代码


    // 1.  async 基础用法
    // 1.1 async作为一个关键字放到函数前面
  async function queryData() {
      // 1.2 await关键字只能在使用async定义的函数中使用      await后面可以直接跟一个 Promise实例对象
      var ret = await new Promise(function(resolve, reject){
        setTimeout(function(){
          resolve('nihao')
        },1000);
      })
      // console.log(ret.data)
      return ret;
    }
  // 1.3 任何一个async函数都会隐式返回一个promise   我们可以使用then 进行链式编程
    queryData().then(function(data){
      console.log(data)
    })
  //2.  async    函数处理多个异步函数
    axios.defaults.baseURL = 'http://localhost:3000';
    async function queryData() {
      //2.1  添加await之后 当前的await 返回结果之后才会执行后面的代码   
      var info = await axios.get('async1');
      //2.2  让异步代码看起来、表现起来更像同步代码
      var ret = await axios.get('async2?info=' + info.data);
      return ret.data;
    }
    queryData().then(function(data){
      console.log(data)
    })




相关文章
|
2月前
|
资源调度 JavaScript 前端开发
vue封装请求
vue封装请求
21 0
|
2月前
第14节:Vue3 简化用法<script setup>
第14节:Vue3 简化用法<script setup>
26 0
|
2月前
|
存储 前端开发 JavaScript
【面试题】面试官问:如果有100个请求,你如何使用Promise控制并发?
【面试题】面试官问:如果有100个请求,你如何使用Promise控制并发?
|
2月前
|
JavaScript
vue页面加载时同时请求两个接口
vue页面加载时同时请求两个接口
|
27天前
|
JavaScript
vue 请求拦截器 的响应拦截器有几种?
vue 请求拦截器 的响应拦截器有几种?
|
6天前
|
JavaScript
vue 发送请求时展示进度条——NProgress的简单使用
vue 发送请求时展示进度条——NProgress的简单使用
8 0
|
2月前
|
JavaScript API UED
|
2月前
|
存储 前端开发 JavaScript
面试官问:如果有100个请求,你如何使用Promise控制并发?
面试官问:如果有100个请求,你如何使用Promise控制并发?
104 0
|
2月前
|
前端开发 JavaScript API
|
2月前
|
JavaScript
Vue中的v-bind指令的用法有哪些?
Vue中的v-bind指令的用法有哪些?
160 37