尝试使用Vue.js(二)接口代理,使用peomise异步编程

尝试使用Vue.js(二)接口代理,使用peomise异步编程

用‘vue’尝试写了个小Demo,熟悉一下vue的流程,和vue生态圈里的‘vue-router’、‘vuex’等。
Demo的在线预览地址
Demo的github代码地址


分下面一点介绍:

  1. vue项目在本地开发中,如何反向代理外域名接口
  2. vue项目在本地开发中,fetch 使用

vue使用 promise规范,引入fetch

  1. 我有篇文章有介绍‘promise’的,异步编程,回调的痛苦大家都知道,现在promise是解决异步编程的比较好的方式,当然ES7中的
    async和await对异步编程跟优雅,但是兼容还是不太好。
  2. 所以本项目引入了fetch,方法很简单‘npm install whatwg-fetch – save’ (因为是代码本身依赖,加下 –save参数)
  3. 在文件:‘ src/cache/cache.js’可以看下fetch的用法,因为我是想把接口单独维护在一个‘cache’文件夹下面,所以并没有用vue提供的插件‘vue-resource’
  4. 如果大家想把接口交互放在组件内部,可以用“vue-resource”插件来提供ajax的方法

vue项目在本地开发中,如何反向代理外域名接口

在本项目中,大部分接口都是用的开放的Api接口,我用的是“聚合数据”的开发接口,大家可以参考。

在文件: src/cache/cache.js 这个文件中,维护着项目里所以的接口,这些接口写的是相对路径,本项目中并没有这些接口,所以开发的时候,就在 vue的server配置中做下代理配置,把这些接口转发到第三方地址上,解决了跨域的问题。如下:

vue的server代理配置文件位置在:config/index.js里

下图是我这个vue案例中配置的截图和说明:
此处输入图片的描述

例如我 src/cache/cache.js 的一个机器人接口:

1
2
3
4
5
6
7
8
9
10
11
12
export const RobotCache = {
/**
* 机器人相关的接口
* @param {Object} Data
* @return {Promise}
*/
getWeather(data) {
let key = '?key=50cd35eb206526335a1c1e0f149f98a5&';
return fetch('op/robot/index' + key + parseParam(data))
.then(response => response.json()).then(response => response.result.text);
}
}

接口的地址是:“op/robot/index” 就会被代理到“http://op.juhe.cn/robot/index”

代理接口可以在本地开发时,和后端联调比较方便

接下文章来我会写一下:

  1. vue上线后nginx反向代理跨域接口
  2. vue项目优化,缓存策略在nginx中的具体音乐

大家如果看了文章,可以留言,一起交流

作者 [@sha Qihe]

2016 年 12月 19日