vue axios 返回值

原创

mob64ca12ef9b85 2023-09-29 17:46:08 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12ef9b85的原创作品，请联系作者获取转载授权，否则将追究法律责任

实现vue axios 返回值

概述

在使用Vue进行前端开发的过程中，经常会与后端进行数据交互。而Axios是一个常用的基于Promise的HTTP库，用于发送HTTP请求。本文将介绍如何使用Vue和Axios实现返回值的处理。

流程图

journey
    title 整个流程
    section 1. 创建Vue实例
        1.1 初始化Vue实例
        1.2 引入Axios库
    section 2. 发起请求
        2.1 创建一个方法用于发送请求
        2.2 使用Axios发送请求
    section 3. 处理返回值
        3.1 处理成功的返回值
        3.2 处理失败的返回值

步骤详解

1. 创建Vue实例

首先，我们需要创建一个Vue实例来管理我们的应用程序。

// main.js

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App)
}).$mount('#app')

2. 发起请求

在Vue实例中，我们可以创建一个方法来发送请求。

// App.vue

<template>
  <div>
    <button @click="getData">获取数据</button>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  methods: {
    getData() {
      // 使用Axios发送GET请求
      axios.get('
        .then(response => {
          // 处理成功的返回值
          console.log(response.data)
        })
        .catch(error => {
          // 处理失败的返回值
          console.error(error)
        })
    }
  }
}
</script>

在上面的代码中，我们创建了一个getData方法，并在按钮的点击事件中调用该方法。在getData方法中，我们使用axios.get方法发送一个GET请求，并使用.then方法处理返回的数据。如果请求成功，我们将数据打印到控制台；如果请求失败，我们将错误打印到控制台。

3. 处理返回值

在上面的代码中，我们已经处理了成功和失败的返回值。实际开发中，我们可能还需要根据具体的业务需求对返回值进行进一步的处理。

// App.vue

<script>
import axios from 'axios'

export default {
  methods: {
    getData() {
      axios.get('
        .then(response => {
          // 处理成功的返回值
          if (response.data.code === 0) {
            // 返回值的code为0表示请求成功
            console.log(response.data.data)
          } else {
            // 返回值的code不为0表示请求失败
            console.error(response.data.message)
          }
        })
        .catch(error => {
          // 处理失败的返回值
          console.error(error)
        })
    }
  }
}
</script>

在上面的代码中，我们根据返回值的code字段判断请求是否成功。如果code为0，表示请求成功，我们打印返回的数据；如果code不为0，表示请求失败，我们打印错误信息。

至此，我们已经完成了使用Vue和Axios实现返回值处理的过程。