使用Vue构建Ionic混合APP系列教程（三）：服务和Http请求_ionic/vue http请求

作者：Cpp五条 | 2024-05-07 10:04:52

踩

ionic/vue http请求

当学习一个新框架的时候，特别是你之前已经使用一个框架很久了，很自然的你会试图用之前使用的框架来理解一些别的框架的原理。

正如我上一篇文章提到的，Angular是一个结构严密的框架，提供了一切开箱即用的东西，不管如何都会有一个正确的方法去解决问题。Vue的结构并不是很严密，也不是什么东西都提供好了，给了你更灵活的选择去按照你希望的方式组织项目的结构。Angular是设计用来处理你的应用所有方面的事情，Vue基本上只关心如何展示你的应用。

在这篇教程，我们会看看如何在Vue里创建Services或Providers，通过Http请求获取一些数据。不过这是一个将Angular的概念投射到Vue上面的例子, 稍后我们将在这里详细地讨论。在这篇教程里我们会通过Reddit API 来post请求一些数据。

开始

在前面的教程中我已经介绍了使用Vue创建一个Ionic应用的基础知识, 所以我们将很快地通过这里的安装步骤。如果您不熟悉这些步骤, 我建议您在继续之前先阅读前面的两个教程。

创建一个Vue应用：

vue init webpack service-http-example1

运行下面的命令行：

cd service-http-example1

npm install1

npm run dev1

通过修改 index.html 向应用程序添加Ionic：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <title>service-example</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script src="https://unpkg.com/@ionic/core@0.0.2-20/dist/ionic.js"></script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Angula服务 vs Vue

在Ionic/Angular里从一些服务器获取数据，我们通常会创建一个服务（service/provider）来为我们做这些工作，我们会用内置的Http API 来获取数据。然后我们会在需要使用这些数据的组件里注入这个服务，再使用我们在服务里创建的方法。

这里没有什么其他需要考虑的东西，不过如果在Ionic/Vue要做同样的事情，就没有这么肯定了。

因为我们是从Angular转过来的，所以可能我们想在Vue里创建一个”provider”，然后用Vue版本的“Http”来获取数据。但是在Vue里没有“provider”或“service”或“injectable”这些概念，而且也没有默认的Http请求库。这些不是Vue框架自己关心的事情。

所以怎么办？你可以想怎么做就怎么做，不过当然了，总会有些公认的/最佳实践的做法。我们会采用“Angular式”的方法，创建类似Angular里的provider的东西。

在Vue里创建服务

我们创建一个services文件夹，在里面我们会手动的创建我们的服务——这个例子里，我们会创建一个reddit服务。

创建文件夹src/services
在这个文件夹下面创建reddit.js：

import Vue from 'vue';

export default {

    getPosts(){
        // do something
        return [];
    }

}1
2
3
4
5
6
7
8
9
10

你可以看到，大致和Angular是相似的，不过没有使用Angular特别的语法比如@Injectable，我们只是用了ES6语法。通过在这里导出方法，我们可以在任何需要使用的地方引入它们。

修改src/components/HelloWorld.vue如下：

import RedditService from '../services/reddit';

export default {
  name: 'HelloWorld',
  data () {
    return {
      posts: []
    }
  },
  created() {
    this.posts = RedditService.getPosts();
  }
}1
2
3
4
5
6
7
8
9
10
11
12
13

就像在Angular里导入一个服务，我们也在这里导入了我们刚刚创建的服务——和Angular不同的是没有别的多余的步骤了。一旦我们导入了服务，我们就可以使用它的方法。在这里我们在生命周期的created（一旦组件被创建就会执行）阶段使用了服务的方法，它会把getPosts()结果的值赋给 this.posts。

Http请求

我们有了自己的服务，不过现在它什么也没做。我们修改一下让它从Reddit为我们获取一些数据。再说一次，Vue不关心你的应用的输入和输出，所以它也没有提供Vue的Http请求的方式。

我们可以使用库来帮助我们做网络请求（如果你喜欢，你也可以只用javascript原生请求）。两个流行的库是 vue-resource（几乎是默认的）和 axios。如果你想用其他的你只需要把他们添加到你的Vue项目——我们会使用vue-resource。

安装vue-resource：

npm install vue-resource --save1

修改src/main.js 如下：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import VueResource from 'vue-resource'

Vue.config.productionTip = false

Vue.config.ignoredElements = [
    'ion-app',
    'ion-header',
    'ion-navbar',
    'ion-title',
    'ion-content',
    'ion-button',
    'ion-list',
    'ion-item'
];

Vue.use(VueResource);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

安装vue-resource之后我们在 main.js 引入了它，然后我们设置应用使用它：

Vue.use(VueResource);1

请注意, 我们还添加了 ignoredElements数组以便我们使用Ionic组件不会造成任何问题。现在，我们有了一种方式来做HTTP 请求。

修改src/services/reddit.js 如下：

import Vue from 'vue';

export default {

    getPosts(){
        return Vue.http.get('https://www.reddit.com/r/gifs/top/.json?limit=20&sort=hot');
    }

}1
2
3
4
5
6
7
8
9

修改src/components/HelloWorld.vue如下：

import RedditService from '../services/reddit';

export default {
  name: 'HelloWorld',
  data () {
    return {
      posts: []
    }
  },
  created() {
    RedditService.getPosts().then(response => {
      this.posts = response.body.data.children;
    });
  }
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

我们的服务现在可以获取数据了，当created生命周期被触发，它会将请求结果赋给成员变量posts。现在我们可以修改我们的模板来展示我们获取的数据。

修改src/components/HelloWorld.vue如下：

<template>
  <ion-app>
    <ion-header>

        <ion-navbar>
            <ion-title>REDDIT!</ion-title>
        </ion-navbar>

    </ion-header>

    <ion-content>

      <ion-list>
        <ion-item v-for="post in posts" v-bind:key="post.data.id">
          {{post.data.title}}
        </ion-item>
      </ion-list>

    </ion-content>
  </ion-app>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

如果你现在打开你的浏览器看一下，应该是这样的：
这里写图片描述

总结

当学习Vue的时候有一点很重要，特别是从Angular背景过来的开发者，记住尽管它们很相似，但是它们仍然是使用不同的方式来实现的不同的两个框架，你不能将你知道的Angular的东西直接用在Vue上。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/548630