js promise async await的用法

本文深入探讨了异步函数async与Promise的使用方法,通过具体示例展示了如何利用async/await简化异步操作,以及如何处理异步流程中的错误。
    aa(num){
      return new Promise((resolve,reject)=>{
        if(num>=10){
          setTimeout(()=>{
            resolve(200)
          },3000)
        }else{
          setTimeout(()=>{
            reject(400)
          },3000)
        }
      })
    },
    async bb(){
      console.log(1)
      var aa_res = await this.aa(9)
        console.log(aa_res)
      console.log(3)
    },

async标志着bb函数为异步函数,隐藏的返回一个promise对象

    async searchResult(cid) {
      var params = {
        id:cid,
      }
      var obj = await get_list(params);
      return obj
    },
    var result = this.searchResult(cid);
    result.then(res=>{
       console.log(res)//输出上面的obj
    })

上面中的return obj 就相当于promise 里面的resolve(obj)

### 如何在 Vue.js 中使用 Promise、`async` 和 `await` #### 使用场景 在现代 Web 开发中,异步操作无处不在。Vue.js 提供了多种方式来处理这些异步逻辑,其中最常见的是通过 Promises 结合 `async`/`await` 来简化代码结构并提高可读性。 #### 实现方法 当涉及到数据获取或其他耗时的任务时,在组件生命周期钩子内定义一个带有 `async` 关键字的方法是一个不错的选择。这允许内部调用被标记为 `await` 的表达式暂停执行直到其解析完毕后再继续[^1]。 对于简单的 HTTP 请求来说,可以利用 Axios 或者 Fetch API 并将其封装在一个返回 promise 的函数里: ```javascript // 定义一个服务类来进行API请求 class ApiService { static async fetchData(url) { try { const response = await fetch(url); if (!response.ok) throw new Error('Network response was not ok'); let data = await response.json(); return data; } catch (error) { console.error(`Error fetching data from ${url}`, error.message); throw error; // 抛出错误以便外部捕获 } } } ``` 接着可以在任何地方轻松地调用这个静态方法,并且由于它是异步的,所以可以直接使用 `await` 调用来等待结果: ```vue <template> <div v-if="loading">Loading...</div> <ul v-else> <li v-for="(item, index) in items" :key="index">{{ item }}</li> </ul> </template> <script setup> import { ref, onMounted } from 'vue'; import { fetchData } from './services/apiService'; const loading = ref(true); const items = ref([]); onMounted(async () => { try { items.value = await fetchData('/api/items'); } finally { loading.value = false; } }); </script> ``` 上述示例展示了如何结合 Composition API (`setup`) 函数中的响应式变量以及组合式函数(如 `ref`, `onMounted`),从而实现更简洁明了的数据流控制[^4]。 值得注意的是,虽然这里展示的例子相对基础,但在实际项目开发过程中应当考虑更多因素,比如状态管理库 Vuex/Vuex Store 的集成、全局错误处理器等高级特性[^2]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

攻城狮狮

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值