在 NativeScript-Vue 应用中向远程 Web 服务发出 HTTP 请求

本文最初发表在 vuejsdevelopers.com 上。

许多（并非全部）移动应用程序充当客户端，用于查看远程数据，这些数据通常会出现在 Web 应用程序中。使用 HTTP 请求来与远程 Web 服务或 RESTful API 通信是消费和传输数据的最常见方式。

如果您一直关注我的 Vue.js 内容，您会记得我写过一篇名为在 Vue.js Web 应用程序中通过 HTTP 使用远程 API 数据的教程。在该教程中，Web 浏览器充当客户端，我们使用 axios 和 vue-resource 来发出 HTTP 请求。

在本教程中，我们将了解如何在使用 Vue.js JavaScript 框架构建的 NativeScript 应用程序中发出 HTTP 请求。

请记住，NativeScript 将创建原生 Android 和 iOS 应用程序。但是，与我之前教程中演示的发出 HTTP 请求的 Web 方法仍然有效。也就是说，我们将研究 NativeScript 的工作方式并重新审视其他方法。

使用 Vue.js 创建一个新的 NativeScript 项目

为简单起见，我们将在一个新的项目中发出简单的 HTTP 请求。这将帮助我们排除任何现有且可能不正确的项目代码。假设您已安装 Vue CLI 和 NativeScript CLI，请执行以下操作

vue init nativescript-vue/vue-cli-template http-project
cd http-project
npm install
npm run watch:ios

上面的命令将使用 NativeScript 模板创建一个名为http-project的新项目，该项目使用 Vue CLI。它们将安装 NativeScript 和 Vue.js 依赖项，然后它们将通过 iOS 模拟器启动应用程序模拟，并进行热重载。如果您无法访问 iOS 模拟器，可以使用 Android。

创建新项目时，系统会询问您一些有关应用程序设置的问题。对于此特定示例，默认设置就可以了。

在我们深入代码之前，我想指出我们将使用开放且免费的 API 来获取 Pokéapi 上的宝可梦数据。您可以使用任何 API 或您自己创建的 API。如果您想自己构建 API，请查看我写的一篇名为使用 Node.js 和 Hapi 框架构建 RESTful API 的教程。

使用 NativeScript HTTP 模块发出 HTTP 请求

我们将探索的第一种方法（也可能是开发 NativeScript 应用程序时推荐的方法）使用 NativeScript HTTP 模块。打开项目的src/components/HelloWorld.vue文件，并包含以下内容以开始

<template>
    <Page class="page">
        <ActionBar class="action-bar" title="Pokemon"></ActionBar>
        <GridLayout>
            <ListView for="p in pokemon" class="list-group">
                <v-template>
                    <StackLayout class="list-group-item">
                        <Label :text="p.name" />
                    </StackLayout>
                </v-template>
            </ListView>
        </GridLayout>
    </Page>
</template>

<script>
    import * as http from "http";
    export default {
        data() {
            return {
                pokemon: []
            };
        },
        mounted() { }
    };
</script>

<style scoped></style>

上面的代码或多或少是我们试图完成的事情的设置。在<script>块中，我们初始化了一个名为pokemon的数组，它将保存我们所有 HTTP 响应数据。我们还导入了与 NativeScript 项目捆绑在一起的http模块。

在<template>块中，我们有一个<ListView>，它根据pokemon数组的内容进行填充。如果我们现在运行应用程序，它将不显示任何内容，因为该数组为空。

现在假设我们要在应用程序加载时获取宝可梦列表。在mounted方法中，我们可以执行以下操作

http.getJSON("https://pokeapi.co/api/v2/pokemon/?limit=151").then(result => {
    this.pokemon = result.results;
}, error => {
    console.log(error);
});

上面的getJSON方法将使用 Pokéapi 获取前 151 只宝可梦的列表。结果将被设置为我们的pokemon数组，并将在我们的列表中渲染。

虽然对本示例没有用，但如果我们想通过 POST 请求发送数据，我们可以执行以下操作

http.request({
    url: "https://httpbin.org/post",
    method: "POST",
    headers: { "Content-Type": "application/json" },
    content: JSON.stringify({
        username: "username",
        password: "password"
    })
}).then(response => {
    var result = response.content.toJSON();
}, error => {
    console.error(error);
});

以上内容摘自 http 模块文档。请记住，Pokéapi 仅供消费，您不应该向其发送数据。

在 NativeScript 应用程序中使用 axios 发出 HTTP 请求

现在我们已经了解了如何使用 NativeScript HTTP 模块与远程 Web 服务交互，让我们看一下如何使用更广为人知的 axios 方法，我在我之前的教程中演示过它。

首先，我们需要为我们的项目获取 axios 库

npm install axios --save

下载完库后，现在我们可以在项目中使用它。我们创建的大部分内容都可以保留，我们只需要删除添加的 NativeScript HTTP 内容即可。

打开项目的src/components/HelloWorld.vue文件，使<script>块看起来像以下内容

<script>
    import axios from "axios";
    export default {
        data() {
            return {
                pokemon: []
            };
        },
        mounted() {
            axios({ method: "GET", "url": "https://pokeapi.co/api/v2/pokemon/?limit=151" }).then(result => {
                this.pokemon = result.data.results;
            }, error => {
                console.error(error);
            });
        }
    };
</script>

在我们的 Vue.js 与 NativeScript 项目中使用 axios 库并不难。它甚至可能拥有更多文档，因为它是一个使用广泛的库。与 NativeScript HTTP 模块一样，它提供了除 GET 请求以外的请求。只需查看官方文档即可。

结论

您刚刚了解了如何在使用 Vue.js 的 NativeScript-Vue Android 和 iOS 应用程序中向流行的远程 API 发出 HTTP 请求。完成此任务有很多方法，但我认为 NativeScript HTTP 模块是推荐的方法，因为它专为原生 Android 和 iOS 功能而设计。