Vuex中actions优雅处理接口请求的方法

目录

• 前言
• 文件结构

前言

在项目开发中，如果使用到了 vuex，通常我会将所有的接口请求单独用一个文件管理，而业务逻辑写在 actions 中，一方面方便统一管理项目中的所有请求，其次代码结构更加清晰，最重要的是可以全局性的处理一些统一的业务逻辑，例如接口入参调整等一些项目中通用的代码。

文件结构

在项目中完整的一套流程大致可以分为三部分：

1.api.js
这个文件通常只用来存放项目中用到的所有接口，可以理解为接口 url 的管理文件。简单的请求示例如下：

import request from "@/utils"; // request可以是一个封装方法，用于发送http请求，通常返回Promise

const domin = "http://....."; // domin为服务端对应环境的域名

export const getUserInfo = (params) => {
  return request(`${domin}/接口`, "GET", params);
};

2.store.js
这个文件为 vuex 管理文件，用来管理接口调用逻辑，以及全局性的入参处理等逻辑。简单示例如下：

// 此处引入接口地址
import { getUserInfo } from "@/api";

export default {
  state: {
    userInfo: null,
  },
  mutations: {
    setUserInfo(state, data) {
      state.userInfo = data;
    },
  },
  actions: {
    // 命名可以直接后边加Action
    getUserInfoAction({ commit, state }, params) {
      const apiParams = {
        // 对params进行转换，转换成接口需要的入参格式
      };
      let tempObj = {}; // 此作用域的全局对象，临时变量作用
      getUserInfo(apiParams)
        .then((res) => {
          // 处理返回结果，例如转换成对应的符合业务需求的数据结构
        })
        .catch((err) => {
          // 处理异常，即异常状态下数据应该是什么样子
        })
        .finally(() => {
          // 存入state；也可以用来执行一些请求结束的提示操作，例如展示toast弹窗等
          commit("setUserInfo", tempObj);
        });
    },
  },
};

3.xxx.vue
这里代表对应的页面，也就是与 vuex 直接交互的地方。简单示例如下：

<template>
  <h1>{{ userInfo }}</h1>
</template>
<script>
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      myData: {},
    };
  },
  computed: {
    ...mapState("user", ["userInfo"]),
  },
  methods: {
    ...mapActions("user", ["getUserInfoAction"]),
  },
  mounted() {
    // 这里myData作为组件产生的数据，根据实际业务需求来决定是否作为参数传递
    this.getUserInfoAction(this.myData);
  },
};
</script>

到此这篇关于Vuex中actions优雅处理接口请求的方法的文章就介绍到这了,更多相关Vuex actions接口请求内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！