admin 管理员组

文章数量: 887021

场景

有时候创业者会开发制作一些项目,比如一些App,去创业园区找大佬展示。

可事不遂人意,App依赖的一些服务出现故障,首屏(首页怎么也登录不进去)。

本来是进入App下单提交结果卡在支付弹窗,进不到下一步,demo肯定没法顺利进行了。

这下可完犊子了,几千万的融资难道就要飞了!

其实这个问题跟:对方服务下线,手上的开发还没有做完,怎么继续进行,是一样的!

下面开始讲解,围绕一个App调用第三方支付服务来讲,请静心阅读。 文末还有博主准备的编程专栏,附送了很多开发学习链接。

我没有创业,不用demo,就不会碰到这个问题了?

以上问题,再泛化,就是搞开发的同学经常会碰到一个问题:对接方的接口还没有准备好,老板还在一边一再催促,甚至压第二,第三个项目了!

或者是,对方的网站挂,手上的项目还得进行怎么办?

所以,这个问题不管是前端,还是后端,App端,只要你的系统有其他系统依赖,通常非本应用进程的其他进程调用,WebAPI调用,前端跨域调用等,都可以统一归结为此类调用事件。

下面谈如何入手解决。

思路

修改自己App的代码

这种就是在自己的代码添加开关位(toggle pattern),开发某个调试的时候把它打开!如下图所示,一个开关切换调用或者请求到自己的模拟数据服务。

如果别人服务对你的应用影响很小,那么可以使用下面的代码来进行。

雷学委演示时间:如何加开关/Toggle

现有的App项目内的代码:

//雷学委CSDN Demo代码:

//这个方法调用其他公司(第三方)的接口
function callOtherServiceFromExternalCompany(){
    axios.get('http:///a-legacy-company-that-provide-unstable-api/api/v1/godBlessYouGetData').then(resp = >{
            handleOnData(resp.data);
        });
}

// handleOnData函数: 是当前app用来接收其他服务数据的
function handleOnData(data){
     //省略,这里是我的服务拿到别人公司数据后的后续处理。
     //省略N行代码。
}

上面的代码,很直观,调用第三方服务之后,触发调用本应用内的handleOnData。

这可以是第三方支付平台,自己应用获取支付结果再进入下一步的订单物流安排等等。(或者是App也可以是那别人的数据触发重新计算绘制界面)

改造后应用内的代码:

//雷学委CSDN Demo代码:
var flag = process.env.NODE\_ENV //从环境变量获取NODE\_ENV,根据这个变量来切换代码调用的分支。

function callOtherServiceFromExternalCompany() {
    if (flag) { //这是我们加的开关位
        var mockData = generateMockData() //生成服务需要的模拟数据
        handleOnData(mockData)
    } else {
        axios.get('http:///a-legacy-company-that-provide-unstable-api/api/v1/godBlessYouGetData').then(resp = >{
            handleOnData(resp.data);
        });
    }
}

//这里是自己项目的代码不需要做任何修改。
// handleOnData函数: 是当前app用来接收其他服务数据的
function handleOnData(data){
     //省略,这里是我的服务拿到别人公司数据后的后续处理。
     //省略N行代码。
}

就这样解决了,flag的具体取值在环境变量设置了。

这种方式可以解决小量少量依赖问题。

通常系统与系统之间不单单有一个接口调用!多了可是会让这代码看起来很凌乱!

调用越多的第三方服务,代码里面出现了很多开关代码,看起来就像层层套娃。(开关串联内部再串联)

最后你的系统看起来就像下面的图片那样,无法维护!

(图片来自:https://www.sohu/a/162197488_813379)

你让后面的同学如何接手?自己想必也不太敢修改代码!

下面说说第二种。

镜像复制第三方站点接口

什么意思?

类比一下就是,家里原来的路由网络名字为:雷学委Wifi,路由器坏了,那买一个新的路由器把网络名也设置为:雷学委Wifi,一样的密码。那么我们的手机电脑都能正常链接了。

就像黑客钓鱼一样,仿造了高仿的服务接口,界面让你的服务无感知继续正常使用。


(图片来自网络:https://m.sohu/a/256230090_100248097)

这个聊的是通过技术手段把依赖服务代理了,把调用都转到自己开发的模拟服务器上。有些小白可能不明白,这里的第三方是别人的服务。

这种方式是可以尽量不修改自己的应用代码或者少修改(不在代码加分支跳转的),通常就是配置网关或者配置修改成调用一个备用服务(或者自己模拟的第三方服务)。

如果有第三方备用服务,理论上只需要把原来调用的站点配置修改成备用站点,不需要有任何代码修改。

我们这里会更多讨论的是没有备用站点/服务的情况。这里稍微有两个做法,当然本质是一样的。

局部镜像模拟对方接口

局部镜像模拟对方接口,当对方有上千个接口被本系统调用的时候,又没有提供一个复制完整测试环境的方法。

只能采用这个策略,先把接口从入口调用先mock(模拟处理)
这样起码登录界面能登进去了,这样起码公司的demo还能做起来。

然后挑选重点的接口进行快速复制!这种方式也适用于第三方服务是一个大站点,他有某个子服务挂掉的情况。

雷学委演示时间:如何局部模拟

好,这里我们还是拿之前的UI服务来展示,代码后面会贴链接。

直接启动UI服务,因为后台产品服务没有启动所以这里显示:后端服务已下线!

编写局部镜像(Mock)

//雷学委-CSDN-代码Demo
const express = require('express');
const cors = require('cors');
const { createProxyMiddleware } = require('http-proxy-middleware');
//雷学委-CSDN-代码Demo:这里创建一个web服务
const app = express();
app.use(cors());

//01 我们拦截模拟了局部的接口
app.use('/products',function(req,res){
    console.log('雷学委:这里调用了我们代理接口:',req.originalUrl)
    res.status(200).send({}); // 这里随便整点啥都行
}) 

//02 其他调用仍然走这个网站http://a-legacy-company-that-provide-unstable-api
// 这里通过代理把对/otherApi的请求转发到原站点。
app.use('/otherApi', createProxyMiddleware({ 
  target: 'http:///a-legacy-company-that-provide-unstable-api/api/v1/godBlessYouGetData', 
  changeOrigin: true 
}));
app.listen(8081);

这里我们看到01代码段:把所有/products的请求拦截在当前模拟服务内进行简单处理(直接send发送一个空的数据{})。

实际上,第三方服务只是暂时不能用,我们要关注的只是把接口(WebAPI对应的处理)进行快速模拟,方便我们开发调试。

当项目开发到差不多,以后还是得切换到正真的服务进行联合调试的!这点需要记住,不可恋战!

启动局部代理服务, 刷新右边的UI服务,UI服务显示第三方服务上线了(绿色的)并打印了服务数据。

复制上述代码保存位proxy8081.js, 安装下图运行。



既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上大数据知识点,真正体系化!

由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新

需要这份系统化资料的朋友,可以戳这里获取

转存中…(img-tw04rdm9-1714182671215)]

既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上大数据知识点,真正体系化!

由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新

需要这份系统化资料的朋友,可以戳这里获取

本文标签: 要路 几百万 故障 明天 项目