向Vue.js中的服務器發送鏈接請求

假設我需要對不同的API端點進行兩次異步調用。第二個電話的查詢參數取決於我從第一個向Vue.js中的服務器發送鏈接請求

快速瀏覽收到：

第一個端點提供特定的順序有些IDS（按排名進行排序，例如）
二端點提供了一些「元信息」那些IDS

端點例子：

GET /端點/一個

響應格式：

[ 
    { 
    id: 1, 
    rating: 0.67 
    }, 
    { 
    id: 2, 
    rating: 0.51 
    }, 
    { 
    id: 3, 
    rating: 0.45 
    }, 
    ... 
]

GET /端點/ 2的id = 1,2

// I receive those ids from call to the first endpoint

響應格式：

[ 
    { 
    id: 1, 
    gender: "male", 
    age: 20, 
    profession: "Programmer" 
    }, 
    { 
    id: 2, 
    gender: "transgender", 
    age: 27, 
    profession: "ML Engineer" 
    } 
]

後來我需要遍歷所有的我和我的模板顯示元信息，但社會秩序應該是相同的，因爲它是在端點的響應IDS /一個

我決定箱子的關鍵： VAL儲存這些需求，即：

const storage = { 
    1: { 
    gender: "male", 
    age: 20, 
    profession: "programmer" 
    } 
}

我也有從第一端點人一個變量，即：

const persons = [ 
    { 
    id: 1, 
    rating: 0.67 
    }, 
    ... 
]

所以在我的模板，我可以做的像水木清華

<p v-for="p in persons">{{ storage[p.id].gender }}</p>

現在的問題是：在我調用某個函數後，如何將所有數據鏈接起來，從而啓動我的請求？ *請記住，我只能用兩個ID查詢第二個端點，所以我需要遍歷我所擁有的ID列表，併爲每個ID分別調用一次。在實際的應用程序，我已經從第一端點〜100點的ID，所以我需要讓〜50個電話到第二個

來源

2017-10-18 Hacking Node

你想要你的答案包括vuex例子嗎？ – LiranC

一旦您收到ID列表，您可以使用['Promise.all']（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all）確保您在繼續之前獲得所有數據。更聰明的是宣佈添加id的突變，並在它們出現時渲染它們。 –

附註：「變性人」不是性別。 https://ux.stackexchange.com/questions/25826/how-can-i-deal-with-diverse-gender-identities-in-user-profiles – ceejayoz

下面是一個例子：https://jsfiddle.net/lucaskatayama/qxyn1rp1/3/

其實，這不是一個VueJS問題。這是一個異步問題，由承諾或回調，或異步/等待在Javascript中。

在我的例子中，我解決了使用Promises。

那裏我模擬請求創建超時並返回一個承諾，當它完成。 Axios做同樣的事情。

當Promise解決時，您可以通過使用.then進行鏈接並傳遞另一個函數來調用第二個請求。然後再然後。

裏面then您可以使用響應如你所願，創建基於返回的數據的另一個請求，請求另一個列表等

做了很多要求，我更喜歡使用async庫限制每次請求的數量。

來源

2017-10-19 00:49:57

感謝您的回答！我已經在我的真實應用中嘗試過了，但是現在我遇到了循環遍歷模板中的列表的問題（看起來像循環在請求和拋出％property％的同時開始）。按鈕點擊發起請求。如果我按下按鈕兩次 - 它呈現的內容，據我所知，因爲在第二次點擊一切都定義;） *我不能使用創建的掛鉤，因爲在真正的應用程序中，我需要傳遞一個id到第一個請求 –

好吧..而不是使用v-for的組件，遍歷列表並獲取，您可以擁有一個包含子組件列表的組件，並且每個子組件可以在創建時獲取。 –

向Vue.js中的服務器發送鏈接請求

回答

相關問題