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

推荐订阅源

B
Blog
D
Docker
J
Java Code Geeks
腾讯CDC
Blog — PlanetScale
Blog — PlanetScale
G
Google Developers Blog
M
MIT News - Artificial intelligence
L
LangChain Blog
T
The Blog of Author Tim Ferriss
P
Proofpoint News Feed
MyScale Blog
MyScale Blog
博客园 - Franky
GbyAI
GbyAI
Hugging Face - Blog
Hugging Face - Blog
aimingoo的专栏
aimingoo的专栏
Last Week in AI
Last Week in AI
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
博客园 - 聂微东
N
Netflix TechBlog - Medium
B
Blog RSS Feed
Y
Y Combinator Blog
阮一峰的网络日志
阮一峰的网络日志
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
Google DeepMind News
Google DeepMind News

蚊子的前端博客

微说 | 有的人觉得只要不考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. 总结 #

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

你在逗我-蚊子的博客