如何迭代 Promise 值并填写表单？

Question

我有一个异步函数 return 获取请求：

  async fetchDataByCodOS(codOS){      
    const res = await fetch(
      'http://localhost:5000/cods/'+codOS,
        {
          method:"GET"
        }
    ).then(res => res.json())
    return res
  }

我能够打印一个 Promise 对象，现在我必须迭代它。通过在 v-text-field

中使用 @input:change()

change(){
   this.fetchDataByCodOS(this.codOS).then( result => console.log(result) ); // Returning Object inside Array
}

我只想抓取对象 Json:

change(){
   this.fetchDataByCodOS(this.codOS).then( result => result.forEach(
       el => console.log(el)   
   ));
}

是的，现在我可以访问对象中的元素，但我无法填写我的表单，使用 v-model 的示例：

<v-text-field label="ID" v-model="ID" disabled> </v-text-field>

我认为正确的填充方法是在我可以在 forEach 中使用的数据中创建一个 ob = {}，但我没有。

export default {
data(){
 return {
   ob: {
    //values here   
       }
  }
 }
}

你们可以建议我更好的 practice/way 来完成这项工作吗？

正在更新

VUE 表格：

      <v-text-field 
        label="Id. OS"
        v-model="codOS"
        @input="change()"  
      > 
      </v-text-field>
    </v-col>
    <v-col cols="12" md="9">
      <v-text-field label="ID"  disabled> </v-text-field>
    </v-col>
    <v-col cols="12" md="4">
      <v-text-field label="NAME"  disabled> </v-text-field>
    </v-col>
    <v-col cols="12" md="8">
      <v-text-field label="CITY"  disabled> </v-text-field>
    </v-col>                
    <v-col cols="12" md="9">
      <v-text-field label="FONE"  disabled> </v-text-field>
    </v-col>    

<script>
  export default {
    data (){
      return{
        codOS: '',
      }
    },
    methods:{
      autocomplete(){
        if(this.codOS.length == '5'){
            const data = this.fetchDataByCodOS(this.codOS);
            //data.then(r =>  console.log(r)); // Here I just grab the data object, but I'm trying to remove the array, so.
           data.then(r => r.forEach(el =>
              console.log(el) 
               //I think her I want to take el.nameObject and assign to v-model
            ))

        }
      },
      // Change my function according MAX
      async fetchDataByCodOS(codOS){      
        const res = await fetch(
          'http://localhost:5000/cods/'+codOS,
            {
              method:"GET"
            }
        )
        const json = await res.json()
        return json
      }
    }
  }
</script>

控制台显示的是什么：

Promise {<pending>}
__proto__: Promise
[[PromiseStatus]]: "resolved"
[[PromiseValue]]: Array(1)
0: {ID: "1", NAME: "EDDY", CITY: "NEW YORK", FONE: "6456465465456"}
length: 1
__proto__: Array(0)

Add.vue?5f53:71 
{ID: "1", NAME: "EDDY", CITY: "NEW YORK", FONE: "6456465465456"}
ID: "1"
NAME: "EDDY"
CITY: "NEW YORK"
FONE: "6456465465456"
__proto__: Object

Answer 1

也许不要将 async/await 与 then 语法混合使用

如果 async/await 语法可用，则不需要使用 then 函数，因为 await/async 在转译时，转译为 then 功能。所以这里没有必要把它们混在一起。

fetch() 是异步的，因此必须等待
json() 也是异步的（明白了！），必须等待

  async fetchDataByCodOS(codOS){      
    const result = await fetch(
      'http://localhost:5000/cods/'+codOS, { method:"GET"}
    )
    const json = await result.json()
    return json
  }

如何绑定数据

您可以在挂载方法中进行异步调用，并将其设置在组件的 data 部分，然后将其传递到模板中。

我使用了 open trivia API 这是一组迭代，你可以看到我是如何使用 v-for 进行迭代的，然后你可以使用 handlebar 类型语法


<template>
  <div>
    <div v-for="(item) in results">
      <div style="border: 1px solid black; padding: 48px">
        <p>q: {{item.question}}</p>
        <p>a: {{item.correct_answer}}</p>
        <p> <input v-model="item.category"> </p> // binding inputs
      </div>
    </div>
  </div>
</template>


  
<script>
export default {
  name: "App",
  components: {},
  props: ["initialResults"],
  data() {
    return {
      results: [{ question: "", category: "" }]
    };
  },
  async mounted() {
    var result = await fetch("https://opentdb.com/api.php?amount=10", {
      method: "GET"
    });
    var json = await result.json();
    this.results = json.results;
    console.log(json);
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

绑定表单输入

根据 https://vuejs.org/v2/guide/forms.html，您可以像这样将模型直接绑定到输入

<input v-model="item.category">

我在这里的沙盒上得到了类似的工作https://codesandbox.io/s/max-vue-fetch-iterate-wc5qm?file=/src/App.vue

我发现以下链接有助于构建我的answer/learning操作方法

https://www.sitepoint.com/fetching-data-third-party-api-vue-axios/ https://vuejs.org/v2/guide/list.html https://vuejs.org/v2/guide/forms.html

如何迭代 Promise 值并填写表单？

How to Iterate Promise values and fill in the form?

javascript

fetch

vue.js

es6-promise

正在更新

也许不要将 async/await 与 then 语法混合使用

如何绑定数据

绑定表单输入