Vue axios await export問題

vue.js vue3 axios

柯柯 2024-07-05 10:15:08 ‧ 1070 瀏覽

分享至

axios 該如何在抓到資料後再export default 出去

src/i18n/index.js

import axios from "axios";
const Lang = {};
axios
  .get(`http://localhost:54012/api/i18nLang/`)
  .then((res) => {
    res.data.forEach((element) => {
      if (typeof Lang[element.language] == "undefined") Lang[element.language] = {};
      if (typeof Lang[element.language][element.groups] == "undefined") Lang[element.language][element.groups] = {};
      Lang[element.language][element.groups][element.name] = element.caption;
    });
  })
  .catch((error) => {
    console.log("i18n/index error:", error);
  });

export default {
  "en-US": Lang.en_US,
  "zh-TW": Lang.zh_tw,
  "ja-jp": Lang.ja_jp,
};

async await 這樣也不能

async function test() {
  await axios
    .get(`http://localhost:54012/api/i18nLang/`)
    .then((res) => {
      res.data.forEach((element) => {
        if (typeof Lang[element.language] == "undefined") Lang[element.language] = {};
        if (typeof Lang[element.language][element.groups] == "undefined") Lang[element.language][element.groups] = {};
        Lang[element.language][element.groups][element.name] = element.caption;
      });
      i18nData = {
        "en-US": Lang.en_US,
        "zh-TW": Lang.zh_tw,
        "ja-jp": Lang.ja_jp,
      };
    })
    .catch((error) => {
      console.log("i18n/index error:", error);
    });
}

test();
export default i18nData;

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

3 個回答

pblaten

iT邦新手 2 級 ‧ 2024-07-05 11:38:11

最佳解答

可能可以試著把他變成非同步方法export出去，在需要使用的地方呼叫再丟入i18n：

//src/i18n/index.js
import axios from "axios";

async function loadI18nData() {
  try {
    const response = await axios.get(`http://localhost:54012/api/i18nLang/`);
    const Lang = {};

    response.data.forEach((element) => {
      if (typeof Lang[element.language] === "undefined") Lang[element.language] = {};
      if (typeof Lang[element.language][element.groups] === "undefined") Lang[element.language][element.groups] = {};
      Lang[element.language][element.groups][element.name] = element.caption;
    });

    return {
      "en-US": Lang.en_US,
      "zh-TW": Lang.zh_tw,
      "ja-jp": Lang.ja_jp,
    };
  } catch (error) {
    console.log("i18n/index error:", error);
    throw error;
  }
}

export { loadI18nData };

i18n的設定，根據你的檔案位置去改:

import { createI18n } from "vue-i18n";
import { loadI18nData } from 'src/i18n/index.js';

const messages = await loadI18nData();
  
const i18n = createI18n({
    locale: "zh-TW",
    globalInjection: true,
    messages,
    silentTranslationWarn: true,
    missingWarn: false,
    silentFallbackWarn: true,
    fallbackWarn: false,
});

app.use(i18n)

回應 5
分享
檢舉

看更多先前的回應...收起先前的回應...

柯柯 iT邦新手 2 級 ‧ 2024-07-05 11:43:56 檢舉

會跳出 Parsing error: Cannot use keyword 'await' outside an async functioneslint 這個訊息 await要在async{}內

柯柯 iT邦新手 2 級 ‧ 2024-07-05 11:56:36 檢舉

謝謝提供思路改了一下
設定的部分

import { loadI18nData } from "src/i18n/index.js";

const i18nData = loadI18nData();
var messages = i18nData.then((r) => {
  messages = r;
});

這樣成功了

pblaten iT邦新手 2 級 ‧ 2024-07-05 12:17:06 檢舉

估計你呼叫的地方外層還有一個block吧，前面也可以提供async關鍵字給他，如果他是箭頭函式()=>，就會是async () =>。

柯柯 iT邦新手 2 級 ‧ 2024-07-05 13:11:51 檢舉

我呼叫的地方是i18n.js 是app config的部分
還是因為Quasar 外面還有一層
i18n.js完整程式碼

import { boot } from "quasar/wrappers";
import { createI18n } from "vue-i18n";
import { loadI18nData } from "src/i18n/index.js";

var messages = loadI18nData().then((r) => {
  messages = r;
});

export default boot(({ app }) => {
  const i18n = createI18n({
    locale: "zh-TW",
    globalInjection: true,
    messages,
    silentTranslationWarn: true,
    missingWarn: false,
    silentFallbackWarn: true,
    fallbackWarn: false,
  });

  // Set i18n instance on app
  app.use(i18n);
});

pblaten iT邦新手 2 級 ‧ 2024-07-05 14:32:23 檢舉

quasar的文件，這個標記點的下面有提到說boot可以使用非同步方法像是：

import { boot } from 'quasar/wrappers'

export default boot(async ({ app, router, store }) => {
  // something to do
  await something()
})

所以應該可以改成：

import { boot } from "quasar/wrappers";
import { createI18n } from "vue-i18n";
import { loadI18nData } from "src/i18n/index.js";

export default boot(async ({ app }) => {
    const messages = await loadI18nData();
    const i18n = createI18n({
        locale: "zh-TW",
        globalInjection: true,
        messages,
        silentTranslationWarn: true,
        missingWarn: false,
        silentFallbackWarn: true,
        fallbackWarn: false,
    });
    app.use(i18n);
});

登入發表回應

woeichern

iT邦新手 1 級 ‧ 2024-07-05 11:35:14

試試看這樣:

async function test() {
  axios
    .get(`http://localhost:54012/api/i18nLang/`)
    .then((res) => {
      // 略
    });
}

await test();
export default i18nData;