我怎樣才能「while循環」一個Axios GET調用，直到滿足條件？

我有一個API可以爲留言板線程返回一個回覆列表（每次通話限制5個回覆）。我正在嘗試做的是在響應中尋找特定的答覆uuid。如果未找到，請爲接下來的5個回覆創建另一個AXIOS GET調用。我怎樣才能「while循環」一個Axios GET調用，直到滿足條件？

我想繼續此循環，直到調用UUID或AXIOS GET調用返回而沒有結果。

實施例API請求：

http://localhost:8080/api/v2/replies?type=thread&key=e96c7431-a001-4cf2-9998-4e177cde0ec3

實施例的API的回覆：

"status": "success", 
"data": [ 
    { 
     "uuid": "0a6bc471-b12e-45fc-bc4b-323914b99cfa", 
     "body": "This is a test 16.", 
     "created_at": "2017-07-16T23:44:21+00:00" 
    }, 
    { 
     "uuid": "0a2d2061-0642-47eb-a0f2-ca6ce5e2ea03", 
     "body": "This is a test 15.", 
     "created_at": "2017-07-16T23:44:16+00:00" 
    }, 
    { 
     "uuid": "32eaa855-18b1-487c-b1e7-52965d59196b", 
     "body": "This is a test 14.", 
     "created_at": "2017-07-16T23:44:12+00:00" 
    }, 
    { 
     "uuid": "3476bc69-3078-4693-9681-08dcf46ca438", 
     "body": "This is a test 13.", 
     "created_at": "2017-07-16T23:43:26+00:00" 
    }, 
    { 
     "uuid": "a3175007-4be0-47d3-87d0-ecead1b65e3a", 
     "body": "This is a test 12.", 
     "created_at": "2017-07-16T23:43:21+00:00" 
    } 
], 
"meta": { 
    "limit": 5, 
    "offset": 0, 
    "next_offset": 5, 
    "previous_offset": null, 
    "next_page": "http://localhost:8080/api/v2/replies?_limit=5&_offset=5", 
    "previous_page": null 
}

環路將呼籲meta > next_page URL的AXIOS GET直到或者UUID在結果被發現或meta > next_page是空（意味着沒有更多的答覆）。

來源

2017-07-19 ATLChris

你有什麼試過的？到目前爲止，看起來你還沒有做出努力。 –

一些情況？這是Vue方法嗎？ – Bert

@DavidL我一直在玩它一段時間。我嘗試了傳統的'while'循環，由於AXIOS的承諾，這些循環不起作用。我也試過建立一個promise while循環（https://gist.github.com/tangzhen/7b9434df8beac308fd3e），但那也行不通。 – ATLChris

什麼你應該尋找是不是while loop，但它被稱爲Recursion：

而：

var counter = 10; 
while(counter > 0) { 
    console.log(counter--); 
}

遞歸：

var countdown = function(value) { 
    if (value > 0) { 
     console.log(value); 
     return countdown(value - 1); 
    } else { 
     return value; 
    } 
}; 
countdown(10);

這意味着功能保持根據外面的具體標準調用自己放。這樣，您就可以創建一個處理響應函數並再次調用本身如果該值不適合你很好（semicode）：

function get() { 
    axios.get('url').then(function(response) { 
     if (response.does.not.fit.yours.needs) { 
      get(); 
     } else { 
      // all done, ready to go! 
     } 
    }); 
} 

get();

如果你想它的諾言鏈接，那麼你應該花一些時間認定它自己出來，每次只是回覆一次承諾;）

來源

2017-07-19 10:25:15

如果您正在使用支持異步/等待的某些東西進行預編譯，這很簡單。下面只是一個例子。在你的情況下，你會檢查你的指導或空的答覆。

new Vue({ 
    el:"#app", 
    methods:{ 
    async getStuff(){ 
     let count = 0; 
     while (count < 5){ 
     let data = await axios.get("https://httpbin.org/get") 
     console.log(data) 
     count++ 
     } 
    } 
    }, 
    mounted(){ 
    this.getStuff() 
    } 
})

或者，按你的迴應我的評論，

new Vue({ 
    el:"#app", 
    async created(){ 
     let count = 0; 
     while (count < 5){ 
     let data = await axios.get("https://httpbin.org/get") 
     // check here for your guid/empty response 
     console.log(data) 
     count++ 
     } 
    } 
})

Working example（在最新的Chrome至少）。

來源

2017-07-19 02:39:39 Bert

你不應該在瀏覽器中使用'async'和'await'，因爲他們製作了大量的代碼，並且仍然很慢:) –

@AndreyPopov我在第一行中提到了預編譯。 – Bert

我看到你已經提到過預編譯，但是它仍然不適合web瀏覽器（不幸的是）：（ –

我怎樣才能「while循環」一個Axios GET調用，直到滿足條件？

回答

相關問題