网络请求数据拦截并翻译
当用户触发ajax请求时,它可以针对ajax请求中的某个参数,进行获取,并进行翻译,将翻译后的文本赋予这个参数,然后再放开请求。
- 它可以针对 xhr、 fetch 方式的网络请求生效。
- 它可以针对 get、post 方式的请求生效。
使用场景
搜索场景,原本是中文的页面,翻译为英文后,给美国人使用,美国人使用时,进行搜索,输入的是英文,然后点击搜索按钮,发起搜索。
然后此会拦截网络请求,将请求中用户输入的搜索文本的内容提取出来,识别它输入的是中文还是英文,如果不是本地的语种中文,那就将其翻译为中文,然后再赋予此请求的这个参数中,然后再放开这次请求。
这样请求真正到达服务端接口时,服务端接受到的搜索的文本内容实际就是翻译后的中文文本,而不是用户输入的英文文本。
使用方式
translate.network.rules = [
{
url: /https://www.guanleiming.com/a/b/.html/,
methods: ['GET', 'POST'],
params: ['a','b1']
},
{
url: /https://www.guanleiming.com/c/d/.html/,
methods: ['GET'],
params: ['a','b1']
},
];
translate.network.use(); //启用
translate.network.rules 设置的是一个规则数组,每个数组有三个参数:
- url js的正则表达式形式,如果网络请求的url (不包含get参数部分)跟此匹配,那便会进行翻译。
注意,这个是正则形式,并不是字符串形式!比如你想匹配http://www.guanleiming.com/a.jsp
那你可以在浏览器控制台用这个来测试是否匹配:/http://www.guanleiming.com/a.jsp/.test('http://www.guanleiming.com/a.jsp')
输出true,那便是证明匹配了。 - methods 限制网络请求的方式
- params 要翻译的参数名,如果这里面出现的参数名有值,那会判断这个值是否需要翻译(参考下面的 自动进行翻译的触发条件),便会自动进行翻译,并将翻译的值赋予当前网络请求,并放行当前网络请求。
因为 translate.network.rules 这是一个数组形态,凡事符合其中任意一个规则,都会触发拦截翻译。
此设置建议放在 translate.execute();
的上面。
自动进行翻译的触发条件
- 当前用户有进行切换语言,比如本地语种设置了简体中文,你当前切换为英文进行浏览时。
- 请求中某个参数的值,其文本语言跟本地语种不一致,比如本地语种是简体中文,而参数的值的文本是英语。
- 设置的 translate.network.rules 匹配上
这三种情况都满足时,才会进行拦截并翻译这个指定参数的值
版本
需要使用 translate.js v3.15.12.20250603 及更高版本