惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

博客园 - Franky
N
Netflix TechBlog - Medium
宝玉的分享
宝玉的分享
Google DeepMind News
Google DeepMind News
腾讯CDC
G
Google Developers Blog
Martin Fowler
Martin Fowler
Microsoft Security Blog
Microsoft Security Blog
Recent Announcements
Recent Announcements
爱范儿
爱范儿
Engineering at Meta
Engineering at Meta
Microsoft Azure Blog
Microsoft Azure Blog
A
About on SuperTechFans
aimingoo的专栏
aimingoo的专栏
有赞技术团队
有赞技术团队
Jina AI
Jina AI
人人都是产品经理
人人都是产品经理
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
M
MIT News - Artificial intelligence
罗磊的独立博客
博客园 - 三生石上(FineUI控件)
美团技术团队
WordPress大学
WordPress大学
阮一峰的网络日志
阮一峰的网络日志

蚊子的前端博客

微说 | 有的人觉得只要不考XX,一定能考好!-蚊子的前端博客 微说 | 春天来了-蚊子的前端博客 明天和意外不知道哪个先来-蚊子的前端博客 微说 | 既然错过了路口,就及时止损,重新规划路线上路-蚊子的前端博客 微说 | 2025年的出生人口数是792万-蚊子的前端博客 微说 | 工作年终总结,让写对接的接口的数量?-蚊子的前端博客 微说 | 温家宝:没有政治体制改革的成功 经济体制改革不可能进行到底-蚊子的前端博客 微说 | 违法犯罪了该不该被禁言?-蚊子的前端博客 微说 | 不明白为什么在推荐去俄罗斯旅游-蚊子的前端博客 微说 | 易中天论骗子-蚊子的前端博客 微说 | 一场大风吹散了秋天-蚊子的前端博客 微说 | 既要、又要、还要、更要!-蚊子的前端博客 又是一年的国庆雨季-蚊子的前端博客 微说 | 预估下2025年的出生人口数据-蚊子的前端博客 微说 | 可惜了我那些小时候的书本-蚊子的前端博客 微说 | 牛马有的是,驴不够了!-蚊子的前端博客 微说 | 能否有一条非户口也能高考的路-蚊子的前端博客 微说 | 小聊中医-蚊子的前端博客 微说 | 将要制作的一款新产品-蚊子的前端博客 微说 | 做人要有信-蚊子的前端博客 微说 | 好一个正义联盟-蚊子的前端博客 微说 | 都是见过吃过的主儿-蚊子的前端博客 微说 | 追求8小时工作制有错吗?-蚊子的前端博客 微说 | 如果尖锐的批评完全消失-蚊子的前端博客 微说 | 很好!-蚊子的前端博客 微说 | 封禁用户可以,但要告知具体原因-蚊子的前端博客 微说 | 面朝大海,春暖花开-蚊子的前端博客 微说 | 程序员的悲哀是什么?-蚊子的前端博客 微说 | 2025年出生人口的预测-蚊子的前端博客 前端在 LiveKit 中如何获取所有的参与者-蚊子的前端博客
同构直出项目中如何实现多终端的接口请求-蚊子的前端博客
author · 2020-03-09 · via 蚊子的前端博客

抢金达人活动采用的是同构直出渲染方案,同时,主要是在新闻客户端和微信里运行。每个终端请求接口的方式都不一样,如何保证这些终端均能正常的进行接口请求呢?还能让开发者在 PC 端开发调试的过程中,也比较方便呢。

1. 面临的挑战 #

我们的项目,主要会从以下几个终端发起接口请求:

多终端多请求-蚊子的博客

首先我们应该梳理每个终端请求接口的特点,然后才能有效的改进。在表格中,即使都是新闻客户端,Android 新闻客户端和 iOS 新闻客户端,请求接口的 jsapi 调用方式也不一样。

终端 数据请求方式
node 服务端 透传 cookie/ua 等信息
Android 客户端 jsapi-postData 方法
iOS 客户端 jsapi-post 方法
微信、手 Q 端 http 的 get 请求
手机浏览器 http 的 get 请求
PC 浏览器 方便调试

2. 改进方案 #

针对各个终端请求的不同特点,我这里也对请求接口的方式进行了封装。

多终端的接口请求-蚊子的博客

封装的原则是:

  1. 先根据 proces.browser 或者 typeof window 来判断当前是服务端还是客户端,若是服务端,则使用request 发起接口接口,并将传过来的 header 信息透传给接口;若是客户端,则通过 ua 来判断是在哪个终端中;
  2. 若在新闻客户端里或者极速版里,则再判断当前是 Android 系统还是 iOS 系统,分别调用对应的jsapi来发起请求;
  3. 若在微信、手 Q 端或者其他移动端浏览器,则使用前端的 fetch 或者XMLHttpRequest发起请求,跨域的话就使用 jsonp 的方式;
  4. 在 PC 浏览器上开发调试的时候,则使用前后端协作的方式;更多详细的内容可以查看【腾讯抢金达人项目中的前后端协作

同时我还为接口的请求添加上了请求量、耗时、错误率等监控信息,当接口发生异常时,方便协调后端同学一起定位问题。

装逼-蚊子的博客

3. 总结 #

我在这里对数据请求的方式,进行了组件化的封装。对外提供统一而稳定的调用方式,业务层无需关心当前的请求从哪个终端发起。所有的逻辑判断全部在数据请求组件内部进行处理。

你在逗我-蚊子的博客