Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本

//return Vue.http.get(ipstr,{}).then(response => {
return Vue.http.get("/api/text",{}).then(response => {
if (response.status == 200) {
return new Promise(response.body);
} else {
return new Promise(response.data.message);
}
})
}
}

测试代理是否成功

<div id="app">
 <button @click="clickF">按钮</button>
</div> 

首先在script标签里面将vuex导入进来

import {mapActions} from "vuex";

在methods中创建一个方法用来发送请求,并在methods的最下面使用结构函数将我们存在vuex中的请求方法按需导入

methods: {
  clickF() {
   this.testInterface().then(data=> {
    console.log(data);
   })
  },
  ...mapActions(["testInterface"])
 }

直接使用this.方法名就可以访问到vuex中的actions方法；这里使用的是辅助函数，也可以使用原始方法

在终端中使用node 启动脚本文件的名称 或者使用 nodemon 启动脚本文件的名称

在浏览器中打开服务的地址点击我们创建的按钮查看请求接口

可以看到我们的代理是请求成功的；状态之所以是304是因为第二次请求的时候如果请求没有发生改变就会使用浏览器缓存；

上面遗留了一个bug就是这个方法只适用于build后的项目；在开发中每次都build无疑浪费了很多时间，下面就来在开发环境中使用服务器代理的方式完成跨域请求

如果是cli创建的项目直接在config文件夹下面的index文件中的proxyTable进行添加就可以了