vue+node实现中间层同步调用接口

为了应对业务的复杂性，提高前端的渲染能力，故在项目中引入nodejs做中间层，前端承接vue，后端对接Java。

至于为什么这么搞，网上有好多文章都在讨论，可以说仁者见仁智者见智，这里我们不在深究。

这里主要记录一下，我在项目中尝试使用这种结构遇到的问题：

1.前端的vue工程采用axios请求中间层node服务会遇到跨域问题

解决方法：打开vue工程的index.js配置文件添加如下配置

assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {'/api': {target: 'http://localhost:3000',changeOrigin: true,pathRewrite: {'^/api': ''}}
},

2.中间层使用axios请求后端接口时需要等待接口返回后，在传递数据给前端，这里就需要使用同步请求机制

解决方法：采用 async, await 方式，如下

var express = require('express')
var router = express.Router()
var http = require('../config/http')router.get('/getFarmTargets', async (req, res, next) => {console.log('进入请求')var result = {}result.targets = await http.get('/cim/cimInfos/survey?orgId=1115').then(response => response.data.code === 0 ? response.data.data : null)result.introductions = await http.get('/cim/introductions', { orgId: 1115 }).then(response => response.data.code === 0 ? response.data.data : null)console.log('回调外层2：' + JSON.stringify(result))res.json({code: '0',msg: '',data: result})next()
})

先记录到这儿，未完待续......

vue+node实现中间层同步调用接口相关推荐

js循环调用接口上传图片
最近接到了一个需求,需要在PC页面上循环调用接口上传图片,最多支持200张. 这可把只会复制粘贴的我给难到了,赶紧理解需求学习学习. 1.分析需求按钮点击弹出会话框. 点击上传组件Ctrl + A ...
IoT 物联网平台自定义Topic同步调用RRPC实战(二)
RRPC:Revert-RPC.RPC(Remote Procedure Call)采用客户机/服务器模式,用户不需要了解底层技术协议,即可远程请求服务.RRPC则可以实现由服务端请求设备端并能够使设 ...
vue调用接口修改密码_vue开发前后端分离前端如何调用后端接口？
对前后端分离如何调用接口这块感觉一直没怎么弄明白,但又不知如何说明,下面我模拟一个项目说明我的问题. 现在我们有个项目,前端用vue开发,后端php开发,后端测试地址为:localhost:8181, ...
vue调用接口获取后台数据_使用Vue实现调用接口加载页面初始数据
使用Vue实现调用接口加载页面初始数据闲着没事写了一个电影推荐的网页,很简单,使用的是Vue的实现. let vm = new Vue({ el:'#content', data:{ name:'' ...
普歌-腾讯云短信+使用node发送短信（3种方法API、SDK）、封装工具、搭建web服务、写接口、调用接口发送短信、时效性判断、验证验证码的正确性（下）
普歌-结合腾讯云短信服务+node搭建一个简单的发送短信web小项目涉及技术: 腾讯云服务后端服务:node+express 前端搭建:html+js 前言:本来这篇博客应该很早就发了,中间有一些 ...
微信小程序接口同步调用方法
前言: 相信有很多小程序开发者在开发的过程中,接口异步调用导致接口调用的顺序和自己想象的不一样,前面的接口还没有调用完成后面的接口已经完成了,由于小程序默认是异步同步调用和异步调用: 那么什么时同步 ...
vue三种调用接口的方法
注:此博客仅用于学习,自己还处于菜鸟阶段,希望给相同处境的人提供一个可参考的博客.如果您觉得不合理,您的指导,非常欢迎,但请不要否定别人的努力,谢谢您了! vue三种调用接口的方法 1. this.$ ...
vue获取接口数据_c#中HttpWebRequest调用接口获取数据
c#中HttpWebRequest调用接口获取数据PART 01-封装接口将post请求进行封装,以便调用使用: /// /// 请求后台地址/// 请求参数/// public string P ...
用Vue+Node从零开始实现拼多多前后端商城项目 — 记录踩坑之旅（上篇）
前言本人移动端开发妹子工程师一枚 ,因为公司项目需要用到前端的技术(主要是vue),自己自学了一段时间,最近花了半个月在工作之余的时间终于自己完完整整写下来一整个前后端商城项目(当然是跟了一个线上项 ...

vue+node实现中间层同步调用接口

这里主要记录一下，我在项目中尝试使用这种结构遇到的问题：

1.前端的vue工程采用axios请求中间层node服务会遇到跨域问题

2.中间层使用axios请求后端接口时需要等待接口返回后，在传递数据给前端，这里就需要使用同步请求机制

解决方法：采用 async, await 方式，如下

vue+node实现中间层同步调用接口相关推荐

最新文章

热门文章