1

我构建了一个工作代码来使用 axios 从假 Airtable 数据库中检索数据。您可以看到下面的代码完美运行。在主表上检索数据没有问题。然而，您可以假设某些字段连接到其他表（在 Airtable 中命名：父子数据或字段）。当您的字段“ORGANIZZAZIONE”（组织）连接到具有组织数据的另一个表时，我的表中是否会出现这种情况，例如：NOME（名称）和 TIPOLOGIA（活动）。正如您在代码中看到的那样，当我尝试访问此数据（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>

4

2 回答 2

0

我有一篇关于这个问题的博客。请检查。 https://www.storyblok.com/tp/how-to-send-multiple-requests-using-axios

于 2020-05-30T07:14:17.827 回答
0

在您的情况下，您需要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)
})

代码笔： https ://codepen.io/hans-felix/pen/MWaNraL

于 2020-05-30T08:03:30.980 回答