Vueを使用してJavaScriptファイルからREST APIを呼び出す-PHP中国語ネットワークQ&A
Vueを使用してJavaScriptファイルからREST APIを呼び出す
P粉170858678
P粉170858678 2023-08-29 19:23:56
0
1
444

Vue ページで完全に動作する Axios API 呼び出しがあります。これを、アプリケーション内で何度も再利用できるスタンドアロンの呼び出し可能なモジュールに変換する必要があります。すべての試みは失敗します。それがスタンドアロン JS の経験不足なのか、それとも他の何かなのかはわかりません。

これは動作する Vue コードです。

<コード><テンプレート> 
  • {{post.resID}}

    {{post.Name}}

  • {{エラーメッセージ}}
<スクリプト> 「axios」から axios をインポートします。 デフォルトのエクスポート { 名前: "GetMxList"、 データ() { 戻る { 投稿: []、 エラー: [] } }、 // コンポーネントの作成時に投稿を取得します。 作成した() { axios.get("http://localhost:8080/rest/...") .then(応答 => { // JSON 応答は自動的に解析されます。 this.posts = 応答.データ }) .catch(e => { this.errors.push(e) }) } }

Vue 3.ご回答ありがとうございます。はっきりと表現できなくてごめんなさい。私の目標は、モジュール (rest.js に似たもの) を作成し、それを Pinia で使用することです。目標は、一度ロードして、その結果を頻繁に使用することです。現在、次のコードのような「静的」読み込みで動作します。getJSONList 呼び出しは JSON 形式の回答を返し、その回答をアプリケーション全体で使用できるように MyList に入れます。したがって、コンポーネントは単純に Pinia マッピングを使用します。

アクション: { 非同期 fetchList() { const data = await getJSONList(); this.Mylist = データ; },

何度も繰り返しました。これは何も返しませんが、少なくともエラーはスローされません...

import axios from 'axios'; エクスポート関数 getJSONList() { constrest = axios.create({ baseURL: "http://localhost:8080/rest/", // より良いアプローチは環境変数を使用することです }); const getPosts = async () => { 試す { return (awaitrest.get("http://localhost:8080/rest/")).data; } キャッチ (エラー) { console.error(err.toJSON()); 新しいエラー(err.message)をスローします。 } }; リターン (getPosts); }

P粉170858678
P粉170858678

全員に返信 (1)
P粉464208937

通常、Axios 部分をモジュールに移動するだけで、データの使用はコンポーネントに任せます。

リーリー

その後、コンポーネント/ストレージなどで...

リーリー
いいねを押す+0
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート
    私たちについて 免責事項 Sitemap
    PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!