axios返回值取到vue页面

原创

mob64ca12dba5b0 2023-09-15 21:21:29 ©著作权

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

实现“axios返回值取到vue页面”的流程

流程图

flowchart TD
    A[Vue页面] --> B[调用axios发送请求]
    B --> C[服务端处理请求并返回数据]
    C --> D[axios接收到返回值]
    D --> E[Vuex存储返回值]
    E --> F[在Vue页面中获取Vuex中的返回值]

步骤及代码实现

在Vue页面中调用axios发送请求

// 引入axios
import axios from 'axios';

// 在Vue页面的方法中调用axios发送请求
axios.get('/api/data')
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.error(error);
  });

服务端处理请求并返回数据

// 服务端接收到请求后处理数据，并返回给客户端
app.get('/api/data', (req, res) => {
  const data = {
    // 返回的数据
  };
  res.json(data);
});

axios接收到返回值

// axios接收到服务端返回的数据
axios.get('/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

Vuex存储返回值

// 在Vuex的store中定义state和mutations
const store = new Vuex.Store({
  state: {
    data: null, // 存储返回值的初始值
  },
  mutations: {
    setData(state, data) {
      state.data = data; // 将返回值存储到state中
    },
  },
});

在Vue页面中获取Vuex中的返回值

// 在Vue页面中通过计算属性获取Vuex中的返回值
computed: {
  data() {
    return this.$store.state.data;
  },
},

代码解析

在Vue页面中调用axios发送请求时，我们首先需要引入axios库，并使用axios.get方法发起get请求。该方法返回一个Promise对象，我们可以使用.then方法处理请求成功的结果，使用.catch方法处理请求失败的结果。在这里我们使用console.log打印出返回值和console.error打印出错误信息。
服务端接收到请求后，可以根据请求的路径和参数进行处理，并将处理后的数据返回给客户端。在这里我们使用express框架来处理请求，使用app.get方法定义一个路由，并在回调函数中编写处理逻辑。我们可以使用res.json方法将数据以JSON格式返回给客户端。
当axios接收到服务端返回的数据时，我们可以通过response.data来获取返回的数据。在这里我们使用console.log打印出返回值和console.error打印出错误信息。
Vuex是一个状态管理模式，用于管理Vue应用中的数据。在Vuex的store中，我们需要定义一个state来存储数据，并定义一个mutation来修改state中的数据。在这里我们定义了一个data属性来存储返回值，并定义了一个setData方法来修改data的值。
在Vue页面中，我们可以通过计算属性来获取Vuex中的数据。在这里我们使用this.$store.state.data来获取Vuex中的返回值。