我如何 "while loop" Axios GET 调用直到满足条件？

Question

我有一个 API returns 留言板线程的回复列表（每次调用限制 5 个回复）。我正在尝试做的是在响应中寻找特定的回复 uuid。如果未找到，请为接下来的 5 个回复再次调用 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 为空（意味着不再回复）。

Answer 1

如果您使用支持 async/await 的东西进行预编译，这将是微不足道的。下面只是一个例子。在您的情况下，您将检查您的 guid 或空响应。

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 至少）。

Answer 2

你应该搜索的不是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);

这意味着该函数根据输出的特定条件不断调用自身。这样你就可以创建一个函数来处理响应并在值不适合你时再次调用它自己（半代码）：

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

get();

如果你想用 promises 链接起来，那么你应该花一些时间自己弄清楚，每次只返回一个 promises ;)

我如何 "while loop" Axios GET 调用直到满足条件？

How can I "while loop" an Axios GET call till a condition is met?

loops

while-loop

promise

vue.js

axios