飞码网-免费源码博客分享网站

点击这里给我发消息

如何用Vue.js和Axios从第三方API获取数据|-JavaScript教程

飞码网-免费源码博客分享网站 爱上飞码网—https://www.codefrees.com— 飞码网-matlab-python-C++ 爱上飞码网—https://www.codefrees.com— 飞码网-免费源码博客分享网站

通常,在构建JavaScript应用程序时,您需要从远程源获取数据或使用API​​。最近,我研究了一些公开可用的API,发现使用这些来源的数据可以完成很多有趣的工作。

一个女人从图书馆书架上收集数据

借助Vue.js,您可以从字面上围绕这些服务之一构建应用程序,并在几分钟之内开始向用户提供内容。

我将演示如何构建一个简单的新闻应用程序,该应用程序将显示当天的热门新闻文章,使用户可以按兴趣类别进行过滤,并从“纽约时报” API中获取数据。您可以在此处找到本教程的完整代码。

最终的应用程序如下所示:

Vue.js新闻网络应用

要继续学习本教程,您需要非常了解Vue.js。您可以在这里找到一个很好的“入门”指南。我还将使用ES6语法。

项目结构

通过将自己限制为两个文件,我们将使事情变得非常简单:

./app.js
./index.html

app.js将包含我们应用程序的所有逻辑,并且index.html文件将包含我们应用程序的主视图。

我们将从以下几个基本标记开始index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>The greatest news app ever</title>
  </head>
  <body>
    <div  >
      <h3 >VueNews</h3>
    </div>
  </body>
</html>

接下来,包括Vue.js并app.js在的底部index.html,在结束</body>标记之前

<script src="https://unpkg.com/vue"></script>
<script src="app.js"></script>

(可选)可以包含Foundation,以利用某些预制样式并使我们的视图看起来更好。将其包含在<head>标签中:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css">

创建一个简单的Vue应用

首先,我们将在element上创建一个新的Vue实例div#app,并使用一些测试数据来模拟来自news API的响应:

// ./app.js
const vm = new Vue({
  el: '#app',
  data: {
    results: [
      {title: "the very first post", abstract: "lorem ipsum some test dimpsum"},
      {title: "and then there was the second", abstract: "lorem ipsum some test dimsum"},
      {title: "third time's a charm", abstract: "lorem ipsum some test dimsum"},
      {title: "four the last time", abstract: "lorem ipsum some test dimsum"}
    ]
  }
});

我们通过el选项告诉Vue要挂载什么元素,并通过data选项指定我们的应用将使用什么数据。

要在我们的应用程序视图中显示此模拟数据,我们可以在#app元素内编写以下标记

<!-- ./index.html -->
<div  v-for="result in results">
  <div >
    <div >
      {{ result.title }}
    </div>
    <div >
      <p>{{ result.abstract }}.</p>
    </div>
  </div>
</div>

v-for指令用于呈现结果列表。我们还使用双花括号来显示每个花括号的内容。

注意:您可以在此处阅读有关Vue模板语法的更多信息。

 

现在,我们有了基本的布局工作:

具有模拟数据的简单新闻应用程序

从API提取数据

要使用NYTimes API,您需要获取一个API密钥。因此,如果您还没有一个,请转到其注册页面并注册以获取Top Stories API的API密钥。

发出Ajax请求和处理响应

Axios是用于发出Ajax请求的基于诺言的HTTP客户端,它将非常适合我们的目的。它提供了一个简单而丰富的API。它与fetchAPI十分相似,但无需为旧版浏览器添加polyfill和其他一些细微之处。

注意:以前vue-resource是Vue项目常用的,但是现在已经退休了。

包括axios:

<!-- ./index.html -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

现在home,一旦安装了Vue应用程序,我们就可以请求从该部分获取最新新闻列表

// ./app.js

const vm = new Vue({
  el: '#app',
  data: {
    results: []
  },
  mounted() {
    axios.get("https://api.nytimes.com/svc/topstories/v2/home.json?api-key=your_api_key")
    .then(response => {this.results = response.data.results})
  }
});

请记住:替换your_api_key为从NYT Dev Network区域获得的实际API密钥。

现在,我们可以在我们的应用程序主页上看到新闻提要。不用担心视图失真。我们将稍作讨论:

 

 

新闻提要

通过Vue devtools,来自NYT API的响应如下所示:

NYT API的响应-Vue.js新闻应用

提示:获取Vue Devtools可简化Vue应用程序的调试。

为了使我们的工作更加整洁和可重用,我们将进行一些小的重构,并引入一个用于构建URL的辅助函数。getPosts通过将其添加到methods对象中,我们还将注册为我们的应用程序的方法

const NYTBaseUrl = "https://api.nytimes.com/svc/topstories/v2/";
const ApiKey = "your_api_key";

function buildUrl (url) {
  return NYTBaseUrl + url + ".json?api-key=" + ApiKey
}

const vm = new Vue({
  el: '#app',
  data: {
    results: []
  },
  mounted () {
    this.getPosts('home');
  },
  methods: {
    getPosts(section) {
      let url = buildUrl(section);
      axios.get(url).then((response) => {
        this.results = response.data.results;
      }).catch( error => { console.log(error); });
    }
  }
});

我们可以通过引入计算属性并对API返回的原始结果进行一些修改来对视图的外观进行更多更改:

// ./app.js

const vm = new Vue({
  el: '#app',
  data: {
    results: []
  },
  mounted () {
    this.getPosts('home');
  },
  methods: {
    getPosts(section) {
      let url = buildUrl(section);
      axios.get(url).then((response) => {
        this.results = response.data.results;
      }).catch( error => { console.log(error); });
    }
  },
  computed: {
    processedPosts() {
      let posts = this.results;

      // Add image_url attribute
      posts.map(post => {
        let imgObj = post.multimedia.find(media => media.format === "superJumbo");
        post.image_url = imgObj ? imgObj.url : "http://placehold.it/300x200?text=N/A";
      });

      // Put Array into Chunks
      let i, j, chunkedArray = [], chunk = 4;
      for (i=0, j=0; i < posts.length; i += chunk, j++) {
        chunkedArray[j] = posts.slice(i,i+chunk);
      }
      return chunkedArray;
    }
  }
});

在上面的代码中,在processedPosts计算属性中,我们将image_url属性附加到每个新闻文章对象。我们通过遍历resultsAPI中的,并在multimedia每个结果数组中进行搜索以找到具有所需格式的媒体类型来做到这一点然后,我们将该媒体的URL分配给该image_url属性。如果媒体不可用,我们会将默认URL设为Placehold.it中的图像。

我们还编写了一个循环,将results数组分为四个部分。这将解决我们先前看到的扭曲视图。

注意:您也可以使用Lodash之类的库轻松进行此分块。

计算属性非常适合处理数据。无需创建方法并在每次需要对帖子数组进行分块时调用它,我们可以简单地将其定义为计算属性并根据需要使用它,因为Vue会在processedPosts任何results更改时自动更新计算属性

计算的属性也会根据其依赖性进行缓存,因此只要results不更改,该processedPosts属性就会返回其自身的缓存版本。这将有助于提高性能,特别是在执行复杂的数据操作时。

接下来,我们编辑标记index.html以显示计算结果:

<!-- ./index.html -->
<div  v-for="posts in processedPosts">
  <div  v-for="post in posts">
    <div >
    <div >
      {{ post.title }}
    </div>
    <a :href="post.url" target="_blank"><img :src="post.image_url"></a>
    <div >
      <p>{{ post.abstract }}</p>
    </div>
  </div>
  </div>
</div>

现在,该应用看起来更好一些:

 

 

纽约时报新闻应用-Vue.js

介绍新闻列表组件

组件可用于保持应用程序模块化,并从根本上扩展HTML。可以将“新闻列表”重构为组件,例如,如果应用程序增长并且决定在其他任何地方使用新闻列表,这将很容易:

// ./app.js

Vue.component('news-list', {
  props: ['results'],
  template: `
    <section>
      <div  v-for="posts in processedPosts">
        <div  v-for="post in posts">
          <div >
          <div >
          {{ post.title }}
          </div>
          <a :href="post.url" target="_blank"><img :src="post.image_url"></a>
          <div >
            <p>{{ post.abstract }}</p>
          </div>
        </div>
        </div>
      </div>
  </section>
  `,
  computed: {
    processedPosts() {
      let posts = this.results;

      // Add image_url attribute
      posts.map(post => {
        let imgObj = post.multimedia.find(media => media.format === "superJumbo");
        post.image_url = imgObj ? imgObj.url : "http://placehold.it/300x200?text=N/A";
      });

      // Put Array into Chunks
      let i, j, chunkedArray = [], chunk = 4;
      for (i=0, j=0; i < posts.length; i += chunk, j++) {
        chunkedArray[j] = posts.slice(i,i+chunk);
      }
      return chunkedArray;
    }
  }
});

const vm = new Vue({
  el: '#app',
  data: {
    results: []
  },
  mounted () {
    this.getPosts('home');
  },
  methods: {
    getPosts(section) {
      let url = buildUrl(section);
      axios.get(url).then((response) => {
        this.results = response.data.results;
      }).catch( error => { console.log(error); });
    }
  }
});

在上面的代码中,我们使用语法注册了一个全局组件Vue.component(tagName, options)建议在定义标签名称时使用连字符,以免与当前或将来的任何标准HTML标签冲突。

我们介绍的其他选项说明如下。

  • 道具:这是一个数据数组,我们希望将其从父范围传递到该组件。我们添加results是因为我们是从主应用程序实例中加载的。
  • 模板:这里我们定义新闻列表的标记。请注意,我们将列表包装在<section>标记中。这是因为组件需要具有一个根元素,而不要具有多个根元素(这是由我们的div.row迭代创建的)。

调整我们的标记以使用我们的news-list组件,并向其传递results数据,如下所示:

<!-- ./index.html -->

<div  >
  <h3 >VueNews</h3>
  <news-list :results="results"></news-list>
</div>

注意:组件也可以创建为单个文件组件(.vue文件),然后由诸如webpack之类的构建工具进行解析。尽管这超出了本教程的范围,但建议将其用于更大或更复杂的应用程序。

为了使事情更进一步,您甚至可以决定将每一篇文章都做成一个组件并使事情变得更加模块化。

实施类别过滤器

为了使我们的应用更丰富,我们现在可以引入类别过滤器,以允许用户仅显示某些类别的新闻。

首先,我们将注册部分列表以及在应用程序中正在查看的部分:

const SECTIONS = "home, arts, automobiles, books, business, fashion, food, health, insider, magazine, movies, national, nyregion, obituaries, opinion, politics, realestate, science, sports, sundayreview, technology, theater, tmagazine, travel, upshot, world"; // From NYTimes

const vm = new Vue({
  el: '#app',
  data: {
    results: [],
    sections: SECTIONS.split(', '), // create an array of the sections
    section: 'home', // set default section to 'home'
  },
  mounted () {
    this.getPosts(this.section);
  },
  // ....
});

接下来,我们可以将其添加到我们的div#app容器中:

<!-- ./index.html -->
<section >
  <h5 >Filter by Category</h5>
  <form>
    <div >
      <div >
        <select v-model="section">
          <option v-for="section in sections" :value="section">{{ section }}</option>
        </select>
      </div>
      <div >
        <a @click="getPosts(section)" >Retrieve</a>
      </div>
    </div>
  </form>
</section>

单击“检索”按钮后,我们getPosts通过click使用语法监听事件来触发所选部分方法@click

最后的接触和演示

我决定添加一些较小的(可选)修饰,以使应用程序体验更好一些,例如引入加载图像。

您可以在下面的CodePen中看到一个演示(功能受限):

或者,您可以在此处查看实时版本。

结论

在本教程中,我们学习了如何从头开始Vue.js项目,如何使用axios从API提取数据,以及如何使用组件和计算属性来处理响应以及处理数据。

飞码网-免费源码博客分享网站 爱上飞码网—https://www.codefrees.com— 飞码网-matlab-python-C++ 爱上飞码网—https://www.codefrees.com— 飞码网-免费源码博客分享网站
赞 ()
内容页底部广告位3
留言与评论(共有 0 条评论)
   
验证码: