Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装


Posted in Javascript onOctober 21, 2019

使用vue init webpack 你的项目名称初始化一个vue的项目

  • 安装依赖 npm install vue-resource http-proxy-middleware vuex koa
  • 在项目的main.js中引入并注册下载的依赖
  • 在main.js中引入vue-resource并注册到vue实例中
import VueResource from 'vue-resource' //用来请求接口
Vue.use(VueResource)
//开启后请求就会以application/x-www-form-urlencoded作为MIME type 就像普通的html表单一样,form形式传给后台,而非JSON
Vue.http.options.emulateJSON = true;

在main.js文件同级创建一个store的文件夹用来存放vuex的文件

在store文件夹中创建一个index.js的文件(vue在查找时会自动查找这个文件),在文件中创建store实例并导出

import Vue from 'vue'
 import VueX from 'vuex'
 import actions from './actions' //这里为了可扩展性,所以单独创建一个文件用来存放请求方法
 Vue.use(VueX);
 //请求之甬道actions所以只导入了actions
 export default new VueX.Store({
  actions
 });

在store文件夹中创建一个actions.js的文件用来存放请求方法

Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装

配置请求代理

在config文件夹下面创建一个host.js文件用来存放开发、测试、生产的请求地址ip

Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装

在文件中你可以根据条件来配置到底是开发还是测试或者是正式环境

let HostType = 0; //用来判断当前是什么环境
let Host = {}; //用来存储当前环境的请求ip
if (HostType == 0) {
 Host = { //对象内的字段可以自定义如果整个项目只有一个后台地址只需要一个字段就可以;
 api: "127.0.0.1:9000",
 base: "",
 fileUp: ""
 } 
} else if (HostType == 1) {
 Host = {
 ...
 }
} else if (HostType == 2) {
 Host = {
 ...
 }
}
 module.exports = Host;

在config文件夹下面创建一个proxy-table.js文件用来存放代理的配置

const HOST = require("./HOST.js");
module.exports = {
 //接口代理
 "/api/text": {
 target: HOST.api, //需要代理到那个地址
 changeOrigin: true //是否跨域
 },
 "/api/demo": {
 target: HOST.api,
 changeOrigin: true
 }
}

在config文件夹下面创建一个proxy-middleware.js凭借代理和注册

//导入插件
const proxyMiddleware = require("http-proxy-middleware");
//导入代理的配置
const proxyTable = require("./proxy-table");
//拿出配置代理的所有匹配的字段
const proxyContext = Object.keys(proxyTable); // ["/api/text","/api/demo"]

module.exports = () => {
 //创建一个默认的配置对象
 const defautOptions = {
 changeOrigin: true,
 secure: false
 }
 //为什么return的是一个async的方法是因为请求代理是通过服务器进行代理的在启动脚本中会使用koa框架来注册这个中间件
 return async (ctx, next) => { //ctx和next都是koa框架中间件自带的参数
 for (let context of proxyContext) { //循环我们拿到的keys数组
  if (ctx.url.startsWith(context)) { //判断当前请求的url中是不是以拿到的keys数组中的某个值开头的
   ctx.respond = false; //绕开koa框架的内置response处理
   let options = proxyTable[context];
  //如果拿取到的直接是IP地址就赋值给配置对象
   if (typeof options === 'string') {
   options = {
    target: options
   }
   }
   //使用Object.assign()方法合并两个对象
   options = Object.assign({},defautOptions,options);
   //将每一个代理都注册,这里必须return一个自执行函数否则代理不会设置成功
   proxyMiddleware(context,options)(ctx.req,ctx.res, next);
  }
 }
 await next();
 }
}

在项目的更目录中创建一个服务启动的文件脚本名字自定义

//在脚本文件中导入我们需要的框架和代理配置文件
const Koa = require("koa"); //所用的框架
const proxy = require("./config/proxy-middleware"); //刚才创建的代理配置文件
//创建一个服务
const app = new Koa();
//将代理插件注册到服务上
app.use(proxy()); //因为我们导出的是一个方法所以需要使用调用的方式注册
//启动服务
app.listen(9000,() => {
 console.log("server running at http://127.0.0.1:9000");
});
//对koa框架不是熟悉的可以使用express框架 如果使用express框架拿代理就不用使用前面那样复杂的写法了
const express = require("express");
const proxy = require("http-proxy-middleware");
const app = express();
app.use(express.static("dist/"));
app.use("/all", proxy({
 target: "http://127.0.0.1:3000",
 changeOrigin: true,
}))
app.listen(9000, (err) => {
 if (err) return console.log(err);
 console.log("app as running at http://127.0.0.1:9000");
})

代理配置好以后就可以写请求方法了,在创建好的store文件夹下面的actions文件里编写请方法

//导入Vue
import Vue from "vue"
export default {
 //测试接口
 testInterface({},postdata) {
  //postdata是你调用的时候传过来的参数可以更具需求拼接接口
  //let ipstr = `/api/text?id=${postdata.id}`;
  //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 启动脚本文件的名称

Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装

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

Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装

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

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

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

Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装

Javascript 相关文章推荐
删除重复数据的算法
Nov 23 Javascript
IE事件对象(The Internet Explorer Event Object)
Jun 27 Javascript
JS随即打乱数组实现代码
Dec 03 Javascript
jQuery使用经验小技巧(推荐)
May 31 Javascript
微信小程序中显示html格式内容的方法
Apr 25 Javascript
JavaScript循环遍历你会用哪些之小结篇
Sep 28 Javascript
微信小程序自定义tabBar组件开发详解
Sep 24 Javascript
angular 服务随记小结
May 06 Javascript
微信小程序如何调用图片接口API并居中显示
Jun 29 Javascript
jQuery实现朋友圈查看图片
Sep 11 jQuery
js中延迟加载和预加载的具体使用
Jan 14 Javascript
Vue操作Storage本地化存储
Apr 29 Vue.js
小程序实现日历左右滑动效果
Oct 21 #Javascript
微信小程序可滑动月日历组件使用详解
Oct 21 #Javascript
微信小程序可滑动周日历组件使用详解
Oct 21 #Javascript
小程序实现横向滑动日历效果
Oct 21 #Javascript
微信小程序实现点击图片放大预览
Oct 21 #Javascript
vue实现Input输入框模糊查询方法
Jan 29 #Javascript
mpvue实现左侧导航与右侧内容的联动
Oct 21 #Javascript
You might like
PHP 根据IP地址控制访问的代码
2010/04/22 PHP
session在PHP大型web应用中的使用
2011/06/25 PHP
php用正则表达式匹配中文实例详解
2013/11/06 PHP
jQuery load方法用法集锦
2011/12/06 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
2013/10/20 Javascript
zTree插件之单选下拉菜单实例代码
2013/11/07 Javascript
Google (Local) Search API的简单使用介绍
2013/11/28 Javascript
JS字符串拼接在ie中都报错的解决方法
2014/03/27 Javascript
Javascript实现检测客户端类型代码封包
2015/12/03 Javascript
JS使用eval()动态创建变量的方法
2016/06/03 Javascript
express默认日志组件morgan的方法
2018/04/05 Javascript
基于mpvue的小程序项目搭建的步骤
2018/05/22 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
2018/06/22 Javascript
JavaScript 几种循环方式以及模块化的总结
2020/09/03 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
2020/11/03 Javascript
[02:36]DOTA2英雄基础教程 帕格纳
2014/01/20 DOTA
[00:12]2018DOTA2亚洲邀请赛 Sccc亮相SOLO赛,今年他又会有什么样的战绩?
2018/04/06 DOTA
用Python制作在地图上模拟瘟疫扩散的Gif图
2015/03/31 Python
Python中defaultdict与lambda表达式用法实例小结
2018/04/09 Python
10分钟用python搭建一个超好用的CMDB系统
2019/07/17 Python
django 基于中间件实现限制ip频繁访问过程详解
2019/07/30 Python
深入了解python中元类的相关知识
2019/08/29 Python
从pandas一个单元格的字符串中提取字符串方式
2019/12/17 Python
PyCharm无法识别PyQt5的2种解决方法,ModuleNotFoundError: No module named 'pyqt5'
2020/02/17 Python
Python利用matplotlib绘制折线图的新手教程
2020/11/05 Python
伦敦高级内衣品牌:Agent Provocateur(大内密探)
2016/08/23 全球购物
Larsson & Jennings官网:现代瑞士钟表匠
2018/03/20 全球购物
屈臣氏越南官网:Watsons越南
2021/01/14 全球购物
关于Assembly命名空间的三个面试题
2015/07/23 面试题
男方父母证婚词
2014/01/12 职场文书
软件部经理岗位职责范本
2014/02/25 职场文书
校车司机安全责任书
2015/05/11 职场文书
城南旧事观后感
2015/06/11 职场文书
公司开业主持词
2015/07/02 职场文书
合作意向书范本
2019/04/17 职场文书
几款流行的HTML5 UI框架比较(小结)
2021/04/08 HTML / CSS