Promise 和 Vue 配合使用的实战案例-JavaScript中文网-JavaScript教程资源分享门户

Promise 和 Vue 配合使用的实战案例

前言

在前端开发中，我们经常需要进行异步操作，比如发送请求、处理数据等等。为了避免回调地狱，Promise 应运而生。Vue.js 作为当前最流行的前端框架之一，支持 Promise。在本文中，我们将介绍 Promise 和 Vue 如何配合使用，并提供一个实战案例供大家参考。

Promise 简介

Promise 是一种解决异步编程的方案，它可以避免回调地狱、统一异步 API 等问题。Promise 对象代表了一个异步操作的最终完成或失败，以及它的返回值。Promise 对象具有以下特点：

对象的状态不受外界影响。Promise 对象有三种状态，分别为 Pending（进行中）、Fulfilled（已成功）和 Rejected（已失败）。只有异步操作的结果可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。
一旦状态改变，就不会再变。Promise 对象的状态一旦变为 Fulfilled 或 Rejected，就不会再发生变化，后续任何操作都无法改变这个结果。

Promise 的基本用法：

const promise = new Promise(function(resolve, reject) {
  // 异步操作
  // resolve('成功') // 操作成功
  // reject(new Error('失败')) // 操作失败
})

promise.then(function(value) {
  // 成功回调
}, function(error) {
  // 失败回调
})

Vue 中的 Promise

在 Vue 中，支持 Promise，通常我们可以通过 Vue.prototype.$http 配置 axios，并返回 Promise：

import axios from 'axios'

Vue.prototype.$http = axios.create({
  baseURL: 'http://localhost:3000/api'
})

export default {
  methods: {
    fetchList() {
      return this.$http.get('/list')
    },
    fetchItem(id) {
      return this.$http.get(`/item/${id}`)
    }
  }
}

实战案例：使用 Promise 和 Vue 完成异步数据加载

场景描述：

页面需要异步加载多个数据。
当所有数据加载完毕后，显示加载完成提示。

具体实现：

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">
        {{ item.title }}
      </li>
    </ul>
    <p v-if="loading">Loading...</p>
    <p v-else>数据加载完毕!</p>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      list: [],
      loading: true
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    async loadData() {
      try {
        const responseList = await axios.get('http://localhost:3000/list')
        const responseItem = await axios.get(`http://localhost:3000/item/${responseList.data[0].id}`)
        this.list = responseList.data
        this.loading = false
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

在以上代码中，我们通过 Axios 发送了两个异步请求，使用 try/catch 处理异常，使用 await 等待数据加载完成，数据加载完成后，将其赋值到本地 data.list 中。当所有数据加载完毕时，data.loading 变量设置为 false，并显示“数据加载完毕！” 的提示。通过这个案例，我们熟悉了 Promise 和 Vue 配合使用的基本方式，并开发了一个简单的功能。

总结

在本文中，我们介绍了 Promise 和 Vue 如何配合使用，并使用实例代码演示了 Promise 和 Vue 完成异步数据加载的示例，相信读者可以通过此案例深入理解 Promise 和 Vue 的使用方式，为日后前端开发工作提供实用的技术参考。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a4d13eadd4f0e0ffd29469

Promise 和 Vue 配合使用的实战案例

纠错反馈