快捷導(dǎo)航

Vuex中actions優(yōu)雅處理接口請(qǐng)求的方法

更新時(shí)間：2022年11月14日 10:28:11 作者：ychizzz

在項(xiàng)目開發(fā)中，如果使用到了 vuex，通常我會(huì)將所有的接口請(qǐng)求單獨(dú)用一個(gè)文件管理，這篇文章主要介紹了Vuex中actions如何優(yōu)雅處理接口請(qǐng)求,業(yè)務(wù)邏輯寫在 actions 中，本文給大家分享完整流程需要的朋友可以參考下

前言

在項(xiàng)目開發(fā)中，如果使用到了 vuex，通常我會(huì)將所有的接口請(qǐng)求單獨(dú)用一個(gè)文件管理，而業(yè)務(wù)邏輯寫在 actions 中，一方面方便統(tǒng)一管理項(xiàng)目中的所有請(qǐng)求，其次代碼結(jié)構(gòu)更加清晰，最重要的是可以全局性的處理一些統(tǒng)一的業(yè)務(wù)邏輯，例如接口入?yún)⒄{(diào)整等一些項(xiàng)目中通用的代碼。

文件結(jié)構(gòu)

在項(xiàng)目中完整的一套流程大致可以分為三部分：

1.api.js
這個(gè)文件通常只用來存放項(xiàng)目中用到的所有接口，可以理解為接口 url 的管理文件。簡(jiǎn)單的請(qǐng)求示例如下：

import request from "@/utils"; // request可以是一個(gè)封裝方法，用于發(fā)送http請(qǐng)求，通常返回Promise

const domin = "http://....."; // domin為服務(wù)端對(duì)應(yīng)環(huán)境的域名

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

2.store.js
這個(gè)文件為 vuex 管理文件，用來管理接口調(diào)用邏輯，以及全局性的入?yún)⑻幚淼冗壿?。?jiǎn)單示例如下：

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

export default {
  state: {
    userInfo: null,
  },
  mutations: {
    setUserInfo(state, data) {
      state.userInfo = data;
    },
  },
  actions: {
    // 命名可以直接后邊加Action
    getUserInfoAction({ commit, state }, params) {
      const apiParams = {
        // 對(duì)params進(jìn)行轉(zhuǎn)換，轉(zhuǎn)換成接口需要的入?yún)⒏袷?
      };
      let tempObj = {}; // 此作用域的全局對(duì)象，臨時(shí)變量作用
      getUserInfo(apiParams)
        .then((res) => {
          // 處理返回結(jié)果，例如轉(zhuǎn)換成對(duì)應(yīng)的符合業(yè)務(wù)需求的數(shù)據(jù)結(jié)構(gòu)
        })
        .catch((err) => {
          // 處理異常，即異常狀態(tài)下數(shù)據(jù)應(yīng)該是什么樣子
        })
        .finally(() => {
          // 存入state；也可以用來執(zhí)行一些請(qǐng)求結(jié)束的提示操作，例如展示toast彈窗等
          commit("setUserInfo", tempObj);
        });
    },
  },
};

3.xxx.vue
這里代表對(duì)應(yīng)的頁面，也就是與 vuex 直接交互的地方。簡(jiǎn)單示例如下：

<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作為組件產(chǎn)生的數(shù)據(jù)，根據(jù)實(shí)際業(yè)務(wù)需求來決定是否作為參數(shù)傳遞
    this.getUserInfoAction(this.myData);
  },
};
</script>

到此這篇關(guān)于Vuex中actions優(yōu)雅處理接口請(qǐng)求的方法的文章就介紹到這了,更多相關(guān)Vuex actions接口請(qǐng)求內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: