调用第三方接口

大多数情况下，调用的第三方接口都是完全或者部分开源及免费的，因此只要在合理的范围内使用我们便可以实现一些简单的数据交互。以聚合数据提供的第三方接口 API 为例进行讲解

聚合数据

聚合数据是国内领先的基础数据服务商，以自有数据为基础，各种便捷服务整合以及第三方数据接入，为互联网开发全行业提供标准化 API 技术支撑服务的 DaaS 平台

在官网 API 首页（https://www.juhe.cn/docs）可以选择你想要的接口类型进行调用

其中包含免费及付费的接口类型，如果只是用于单个的调用或测试，建议大家使用免费接口就可以了（非会员只能申请一个免费接口，比较坑），但如果你的应用准备上架或发布，你最好付费以获得更多的调用和使用接口的次数

点击你想使用的接口后你便可以查看该接口的 API 文档，包括接口地址、请求方式、请求示例及返回示例等，比如这里我点击“笑话大全”。

调用接口需要平台提供的 AppKey，在注册登录个人中心的我的数据中可以查看对应接口的 AppKey。获取到 AppKey 后便可以对接口进行测试，这里可以直接通过对应接口的测试按钮进行测试，当然你也可以通过 postman 工具进行调试

其他第三方接口

除了整合型的第三方接口聚合数据外，其他比较实用的第三方接口还有：

高德地图：访问高德地图的 Web API
GitHub：世界上领先的软件开发平台
百度翻译：支持多种语言之间的相互翻译
和风天气：中国天气信息
阿凡达数据：提供中国可用的 API

实例

以接入聚合数据的 历史上的今天 接口为例。

code

请求地址：http://api.juheapi.com/japi/toh
请求参数：v=1.0&month=10&day=31&key=你的AppKey
请求方式：GET

上方详情中可以看到请求参数主要有 4 个，分别为：

v：string 类型。版本，当前：1.0
month：int 类型。月份，如：10
day：int 类型。日，如：1
key：string 类型。你的 AppKey

通过接口入参的说明可以知道唯一可以变的数据便是月份和日期，所以页面中得有选择月日的功能。

另外再来看一下该接口的出参示例：

json

{
    "error_code": 0,
    "reason": "请求成功！",
    "result": [
        {
            "day": 1, 
            "des": "1907年11月1日 电影导演吴永刚诞生 　　吴永刚，1907年11月1日生于江苏吴县。1932年后参加影片《三个摩登女性》、《母性之光》的拍摄工作。1934年在联华影片公司编导处女作《神女》，一举成名，...",  
            "id": 9000, 
            "lunar": "丁未年九月廿六",
            "month": 11, 
            "pic": "",  
            "title": "电影导演吴永刚诞生",  
            "year": 1907  
        },
    }
}

通过上方示例，我们可以获取历史上的今天的标题、详情、图片等，这些数据可以用于页面展示。通过点击上图中“查看历史上的今天”按钮，便可以调用接口获取数据列表并渲染。主要代码如下：

html

<template>
  <div>
    <datetime-view v-model="value" ref="datetime" :format="format"></datetime-view>
    <p class="info">选中值: {{ value }}</p>
    <div class="btn-padding">
      <x-button type="primary" @click.native="watchHistory">查看历史上的今天</x-button>
    </div>
    <panel header="历史上的今天" :list="list" type="1"></panel>
  </div>
</template>
<script>
  import { DatetimeView, XButton, Panel } from 'vux'
  import { getHistory } from '_ser/moduleB'

  export default {
    data() {
      return {
        value: '10-31',
        format: 'MM-DD',
        list: []
      }
    },
    methods: {
      watchHistory() {
        let data = this.value.split('-')

        this.list = [];

        getHistory({
          v: '1.0',
          month: data[0],
          day: data[1],
          key: 'd6ceaf9be9f116ae45e7699845d87056'
        }).then(response => {
          if (!response.error_code) {
            response.result.map(e => {
              this.list.push({
                title: e.title,
                desc: e.des,
                src: e.pic,
              })
            })
          }	
        })
      }
    },
    components: {
      DatetimeView,
      XButton,
      Panel
    },
  }
</script>

通过调用封装的 getHistory 接口名称进行数据的获取，在本地调用的过程中需要注意跨域的问题，可以配置 devServer 的 proxy 代理来解决：

javascript

/* vue.config.js */

module.exports = {
  devServer: {
    proxy: {
      '/juheapi': {
        target: 'http://api.juheapi.com/',
        changeOrigin: true,
        pathRewrite: {'^/juheapi': ''}
      }
    }
  }
}

这样便完成了使用第三方接口获取数据实现页面渲染的功能，为自己的应用填充了数据和功能