vue.js 和 Airtable 的多个 axios 请求
Multiple axios requests with vue.js and Airtable
我构建了一个工作代码来使用 axios 从假 Airtable 数据库中检索数据。您可以看到下面的代码完美运行。在主 table 上检索数据没有问题。然而,您可以假设某些字段连接到其他 tables(在 Airtable 中命名:父子数据或字段)。在我的 table 中,当您的字段 "ORGANIZZAZIONE"(组织)连接到另一个 table 时,是否存在组织数据,例如:NOME(名称)和 TIPOLOGIA(Activity).
正如您在我尝试访问此数据 (ORGANIZZAZIONE) 时在代码中看到的那样,我得到了糟糕的结果。可能我必须构建一个 "axios.all" 请求,但我找不到正确的方法。
enter code here
new Vue({
el: '#app',
data: {
saluti:'Saluti da Mauro',
items: []
},
mounted: function(){
this.loadItems();
},
methods: {
loadItems: function(){
// Init variables
var self = this
var app_id = "apppCqmyJHPmfDTLr"; <!-- base -->
var app_key = "key8S2tx7NINXaZzZ";
this.items = []
axios.get(
"https://api.airtable.com/v0/"+app_id+"/DASHBOARD?api_key="+app_key,
{
headers: { Authorization: "Bearer "+app_key }
}
).then(function(response){
self.items = response.data.records
}).catch(function(error){
console.log(error)
})
}
}
})
<head>
<title>Airtable example</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<h1>AIT</h1>
<p>All work from <strong>Ryan Hayden</strong> | <a href="https://medium.com/row-and-table/an-basic-intro-to-the-airtable-api-9ef978bb0729">A basic introduction to the Airtable API</a>.</p>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<div id="app">
<h2>{{saluti}}</h2>
<div class="container-fluid">
<div class="card-body" v-for="item, index in items" :key:="items">
<img src="https://www.artemedialab.it/wp-content/uploads/2019/04/immagini-sfondo-1-700x400.jpg" class="card-img-top" class="img-fluid" alt="MM" style="width: 18rem;">
<div class="card text-BLACK bg-primary mb-3 text-right" style="width: 18rem;">
<div class="card-header">
<a href="#" class="btn btn-secondary" class="text-left">{{ index+1 }}</a>
</div>
<div class="card text-black bg-success mb-3" style="max-width: 18rem;">
<div class="card border-primary mb-1" style="max-width: 18rem;">
<!-- lavorare su questo per approfondire la struttura su JSON
this.posts = response.data.data.map((post) => {
return {id: post.id, title: post.attributes.title, body: post.attributes.body};
}) -->
<p class="price"><strong>DATA INIZIO: </strong>{{ item['fields']['DATA INIZIO'] }}</p>
<p class="category"><strong>DETTAGLI ATTIVITA': </strong>{{ item['fields']["Attivita'"] }}</p>
<p class="category"><strong>PRIORITA': </strong>{{ item['fields']["PRIORITA'"] }}</p>
<p class="category"><strong>ORGANIZZAZIONE: </strong>{{ item['fields']['ORGANIZZAZIONE']}}</p>
<p class="category"><strong>ORGANIZZAZIONE / NOME: </strong>{{ item['fields']['ORGANIZZAZIONE']['Nome_Organizzazione']}}</p>
<p class="category"><strong>ORGANIZZAZIONE / TIPOLOGIA: </strong>{{ item['fields']['ORGANIZZAZIONE']['TIPOLOGIA']}}</p>
<img :src="item['fields']['Photo'][0]['thumbnails']['large']['url']" alt="" v-if="item['fields']['Photo']" width="150">
</div>
</div>
</div>
</div>
<!--app-->
<!-- Include Dependancy Scripts -->
<script type="text/javascript" src="https://unpkg.com/vue"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script>
</body>
我有一篇关于这个问题的博客。请检查。
https://www.storyblok.com/tp/how-to-send-multiple-requests-using-axios
在您的情况下,您需要为响应中的每个 ORGANIZZAZIONE
调用 api,然后附加它。这是第一个 ORGANIZZAZIONE
:
的示例
var app_id = "apppCqmyJHPmfDTLr";
var app_key = "key8S2tx7NINXaZzZ";
this.items = []
axios.get(
"https://api.airtable.com/v0/" + app_id + "/DASHBOARD?api_key=" + app_key, {
headers: {
Authorization: "Bearer " + app_key
}
}
).then(function(response) {
// here get ORGANIZZAZIONE for each record
for (let record of response.data.records) {
// here the first ORGANIZZAZIONE on array
let ORGANIZZAZIONE = record.fields.ORGANIZZAZIONE[0];
//call Airtable api again
axios.get(
"https://api.airtable.com/v0/" + app_id + "/DASHBOARD/" + ORGANIZZAZIONE + "?api_key=" + app_key, {
headers: {
Authorization: "Bearer " + app_key
}
}
).then(function(response2) {
// Replace ORGANIZZAZIONE on first response to the the data in response2
record.fields.ORGANIZZAZIONE = response2.data.fields;
this.items = response.data.records; // You can set each time is getted
}).catch(function(error) {
console.log(error)
})
}
}).catch(function(error) {
console.log(error)
})
我构建了一个工作代码来使用 axios 从假 Airtable 数据库中检索数据。您可以看到下面的代码完美运行。在主 table 上检索数据没有问题。然而,您可以假设某些字段连接到其他 tables(在 Airtable 中命名:父子数据或字段)。在我的 table 中,当您的字段 "ORGANIZZAZIONE"(组织)连接到另一个 table 时,是否存在组织数据,例如:NOME(名称)和 TIPOLOGIA(Activity). 正如您在我尝试访问此数据 (ORGANIZZAZIONE) 时在代码中看到的那样,我得到了糟糕的结果。可能我必须构建一个 "axios.all" 请求,但我找不到正确的方法。
enter code here
new Vue({
el: '#app',
data: {
saluti:'Saluti da Mauro',
items: []
},
mounted: function(){
this.loadItems();
},
methods: {
loadItems: function(){
// Init variables
var self = this
var app_id = "apppCqmyJHPmfDTLr"; <!-- base -->
var app_key = "key8S2tx7NINXaZzZ";
this.items = []
axios.get(
"https://api.airtable.com/v0/"+app_id+"/DASHBOARD?api_key="+app_key,
{
headers: { Authorization: "Bearer "+app_key }
}
).then(function(response){
self.items = response.data.records
}).catch(function(error){
console.log(error)
})
}
}
})
<head>
<title>Airtable example</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<h1>AIT</h1>
<p>All work from <strong>Ryan Hayden</strong> | <a href="https://medium.com/row-and-table/an-basic-intro-to-the-airtable-api-9ef978bb0729">A basic introduction to the Airtable API</a>.</p>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<div id="app">
<h2>{{saluti}}</h2>
<div class="container-fluid">
<div class="card-body" v-for="item, index in items" :key:="items">
<img src="https://www.artemedialab.it/wp-content/uploads/2019/04/immagini-sfondo-1-700x400.jpg" class="card-img-top" class="img-fluid" alt="MM" style="width: 18rem;">
<div class="card text-BLACK bg-primary mb-3 text-right" style="width: 18rem;">
<div class="card-header">
<a href="#" class="btn btn-secondary" class="text-left">{{ index+1 }}</a>
</div>
<div class="card text-black bg-success mb-3" style="max-width: 18rem;">
<div class="card border-primary mb-1" style="max-width: 18rem;">
<!-- lavorare su questo per approfondire la struttura su JSON
this.posts = response.data.data.map((post) => {
return {id: post.id, title: post.attributes.title, body: post.attributes.body};
}) -->
<p class="price"><strong>DATA INIZIO: </strong>{{ item['fields']['DATA INIZIO'] }}</p>
<p class="category"><strong>DETTAGLI ATTIVITA': </strong>{{ item['fields']["Attivita'"] }}</p>
<p class="category"><strong>PRIORITA': </strong>{{ item['fields']["PRIORITA'"] }}</p>
<p class="category"><strong>ORGANIZZAZIONE: </strong>{{ item['fields']['ORGANIZZAZIONE']}}</p>
<p class="category"><strong>ORGANIZZAZIONE / NOME: </strong>{{ item['fields']['ORGANIZZAZIONE']['Nome_Organizzazione']}}</p>
<p class="category"><strong>ORGANIZZAZIONE / TIPOLOGIA: </strong>{{ item['fields']['ORGANIZZAZIONE']['TIPOLOGIA']}}</p>
<img :src="item['fields']['Photo'][0]['thumbnails']['large']['url']" alt="" v-if="item['fields']['Photo']" width="150">
</div>
</div>
</div>
</div>
<!--app-->
<!-- Include Dependancy Scripts -->
<script type="text/javascript" src="https://unpkg.com/vue"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script>
</body>
我有一篇关于这个问题的博客。请检查。 https://www.storyblok.com/tp/how-to-send-multiple-requests-using-axios
在您的情况下,您需要为响应中的每个 ORGANIZZAZIONE
调用 api,然后附加它。这是第一个 ORGANIZZAZIONE
:
var app_id = "apppCqmyJHPmfDTLr";
var app_key = "key8S2tx7NINXaZzZ";
this.items = []
axios.get(
"https://api.airtable.com/v0/" + app_id + "/DASHBOARD?api_key=" + app_key, {
headers: {
Authorization: "Bearer " + app_key
}
}
).then(function(response) {
// here get ORGANIZZAZIONE for each record
for (let record of response.data.records) {
// here the first ORGANIZZAZIONE on array
let ORGANIZZAZIONE = record.fields.ORGANIZZAZIONE[0];
//call Airtable api again
axios.get(
"https://api.airtable.com/v0/" + app_id + "/DASHBOARD/" + ORGANIZZAZIONE + "?api_key=" + app_key, {
headers: {
Authorization: "Bearer " + app_key
}
}
).then(function(response2) {
// Replace ORGANIZZAZIONE on first response to the the data in response2
record.fields.ORGANIZZAZIONE = response2.data.fields;
this.items = response.data.records; // You can set each time is getted
}).catch(function(error) {
console.log(error)
})
}
}).catch(function(error) {
console.log(error)
})