Vue Axios異步與數(shù)據(jù)類型轉換問題淺析

更新時間：2023年01月28日 08:40:06 作者：知奕奕

總的來說這并不是一道難題，那為什么要拿出這道題介紹？拿出這道題真正想要傳達的是解題的思路，以及不斷優(yōu)化探尋最優(yōu)解的過程。希望通過這道題能給你帶來一種解題優(yōu)化的思路，Axios是一個開源的可以用在瀏覽器端和Node JS的異步通信框架，主要作用就是實現(xiàn)AJAX異步通信

axios 請求中異步與否問題

眾所周知，axios 請求有些請求需要配合異步函數(shù)來實現(xiàn)，我大概總結了兩種適配場景：

不使用異步：后端響應值對后續(xù)操作無影響，我們僅需要判斷這個請求是否成功的情況下

使用異步：我們需要存儲后端響應值并使用它進行某些渲染操作

不使用異步的例子

參考我們上一節(jié)的最后一塊，我們抽離了登錄校驗的 axios 請求，這是具體代碼

可見，我們只需要把本地 token 傳遞給后端，經(jīng)過后端 jwt 驗證并返回一個成功狀態(tài)碼 200，既然成功了，自然就會執(zhí)行 then 內(nèi)的方法，此時我們無需對響應體做出任何判斷都可以明確的知道此次登錄驗證是成功的，所以直接返回一個布爾值 true 即可

這里就不需要使用到異步函數(shù)

validateLogin: (url, uname, pwd) => {
    // 使用post請求，請求體data即傳入兩個必要值
    http
      .post(url, {
        username: uname,
        password: pwd,
      })
      // 在then中處理請求成功的方法
      .then((res) => {
        console.log(res);
        let token = res.data.msg;
        localStorage.setItem("token", token);
        fastMessage.success("成功登錄！");
      })
      // 在catch中處理請求失敗的方法
      .catch((err) => {
        fastMessage.error("用戶名或密碼錯誤！");
        return false;
      });
    // 返回值有無取決于你的項目需求
    return true;
  },

使用異步的例子

一般的，在我們使用 axios 請求后端服務器時必定會有一小段往返時間，假設我們不使用異步函數(shù)，那么就會造成還沒有取回響應體就直接返回了，那么必然會得到一個空值！

使用 try...catch... 代碼塊處理響應成功與否，因為 catch 能捕獲到任意層次深度的任意錯誤，故 axios 請求一旦失敗則必被捕獲！

異步執(zhí)行請求保證了我們獲取的響應體值為后端數(shù)據(jù)，最后的 return 也能正確的返回帶值變量

import http from "./http.js";
let userDatas;
// 異步函數(shù)，發(fā)送后端查詢數(shù)據(jù)庫得到所有用戶信息
async function userDataQuery(url) {
  try {
    // 異步請求后端并拿到結構Promise
    let res = await http.get(url);
    // 將獲取到的響應體中的值賦予給全局變量
    userDatas = res.data.data;
    console.log(userDatas);
  } catch (err) {
    console.log("這TMD是錯的");
  }
  // 返回全局變量
  return userDatas;
}
export default {
  userDataQuery,
};

同志醒醒，這還沒完，因為我們使用 async 構造異步函數(shù)，無論該函數(shù)返回啥，結果都是一個 promise 對象，我們只需要最后一步，對其進行數(shù)據(jù)提取并存儲就完事了?。?！

請看模塊的 script 部分代碼：

這里使用了 pinia 進行數(shù)據(jù)存儲，setUsersList 是 actions 中的一個方法，它是用來設置 state 中的其中一個變量的值的，這一步操作下來即可把我們要的數(shù)據(jù)存儲到 store 里面了！

因為變量 datas 已被 reactive 響應式，故 store 的更新也會帶動該變量的更新，同時帶動對應渲染的更新

import { onMounted, reactive, ref } from "vue";
import apiQuery from "../../api/api-query.js";
import dbStore from "../../store/db-store.js";
const store = dbStore();
let datas = reactive(store.$state.userLists);
// 執(zhí)行最后一步的promise處理
apiQuery.userDataQuery("/sdb/allusers").then((res) => {
  // 調(diào)用store中的方法直接把數(shù)據(jù)存儲到status域中的變量
  store.setUsersList(res);
  // 隨意輸出一些內(nèi)容作為驗證
  console.log(res);
});

對象與數(shù)組轉換

執(zhí)行異步 axios 請求時，對于 POST 類型的數(shù)據(jù)存儲往往會遇到 formdata 是一個對象，而我們 vue 渲染時需要的偏偏就得是數(shù)組類型的

這一步可以在 store 中的 actions 配置的方法里面進行處理

此處簡單的使用了 foreach 把對象內(nèi)容一一壓入數(shù)組的方式實現(xiàn)，請注意每次執(zhí)行該方法是變量值的配置！??！

import { defineStore } from "pinia";
import Names from "./names.js";
const dbStore = defineStore(Names.DBSTORE, {
  // 隨意配置一個數(shù)組變量userLists
  state: () => {
    return {
      userLists: [],
    };
  },
  actions: {
    // 設置變量的值，形參data即傳來的對象object
    setUsersList(data) {
      // 轉換前務必清空變量值，否則會造成值重復添加現(xiàn)象
      this.userLists = [];
      // foreach將對象中的值一個個取出來添加到數(shù)組里面
      for (let i in data) {
        console.log(data[i]);
        this.userLists.push(data[i]);
      }
    },
  },
  getters: {},
});
export default dbStore;

到此這篇關于Vue Axios異步與數(shù)據(jù)類型轉換問題淺析的文章就介紹到這了,更多相關Vue Axios異步內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: