optimize fetchpool

This commit is contained in:
Gabe Yuan
2023-08-10 11:55:40 +08:00
parent 1c240d6edd
commit 69b5c4ff22
8 changed files with 104 additions and 71 deletions

View File

@@ -59,7 +59,7 @@ const apiGoogleTranslate = async (translator, text, to, from) => {
"Content-type": "application/json",
},
},
{ useCache: true, translator }
{ useCache: true, usePool: true, translator }
);
};
@@ -70,7 +70,7 @@ const apiGoogleTranslate = async (translator, text, to, from) => {
* @param {*} from
* @returns
*/
const apiMicrosoftTranslate = (translator, text, to, from, token) => {
const apiMicrosoftTranslate = (translator, text, to, from) => {
const params = {
from,
to,
@@ -82,12 +82,11 @@ const apiMicrosoftTranslate = (translator, text, to, from, token) => {
{
headers: {
"Content-type": "application/json",
Authorization: `Bearer ${token}`,
},
method: "POST",
body: JSON.stringify([{ Text: text }]),
},
{ useCache: true, translator }
{ useCache: true, usePool: true, translator }
);
};
@@ -109,8 +108,6 @@ const apiOpenaiTranslate = async (translator, text, to, from) => {
{
headers: {
"Content-type": "application/json",
Authorization: `Bearer ${openaiKey}`, // OpenAI
"api-key": openaiKey, // Azure OpenAI
},
method: "POST",
body: JSON.stringify({
@@ -129,7 +126,7 @@ const apiOpenaiTranslate = async (translator, text, to, from) => {
max_tokens: 256,
}),
},
{ useCache: true, translator }
{ useCache: true, usePool: true, translator, token: openaiKey }
);
};
@@ -138,10 +135,7 @@ const apiOpenaiTranslate = async (translator, text, to, from) => {
* @param {*} param0
* @returns
*/
export const apiTranslate = async (
{ translator, q, fromLang, toLang },
{ token }
) => {
export const apiTranslate = async ({ translator, q, fromLang, toLang }) => {
let trText = "";
let isSame = false;
@@ -153,7 +147,7 @@ export const apiTranslate = async (
trText = res.sentences.map((item) => item.trans).join(" ");
isSame = to === res.src;
} else if (translator === OPT_TRANS_MICROSOFT) {
const res = await apiMicrosoftTranslate(translator, q, to, from, token);
const res = await apiMicrosoftTranslate(translator, q, to, from);
trText = res[0].translations[0].text;
isSame = to === res[0].detectedLanguage.language;
} else if (translator === OPT_TRANS_OPENAI) {

View File

@@ -1,6 +1,7 @@
import browser from "webextension-polyfill";
import {
MSG_FETCH,
MSG_FETCH_LIMIT,
DEFAULT_SETTING,
DEFAULT_RULES,
DEFAULT_SYNC,
@@ -12,7 +13,7 @@ import {
import storage from "./libs/storage";
import { getSetting } from "./libs";
import { syncAll } from "./libs/sync";
import { fetchData } from "./libs/fetch";
import { fetchData, fetchPool } from "./libs/fetch";
/**
* 插件安装
@@ -47,7 +48,8 @@ browser.runtime.onMessage.addListener(
({ action, args }, sender, sendResponse) => {
switch (action) {
case MSG_FETCH:
fetchData(args.input, args.init, args.opts)
const { input, init, opts } = args;
fetchData(input, init, opts)
.then((data) => {
sendResponse({ data });
})
@@ -55,6 +57,11 @@ browser.runtime.onMessage.addListener(
sendResponse({ error: error.message });
});
break;
case MSG_FETCH_LIMIT:
const { interval, limit } = args;
fetchPool.update(interval, limit);
sendResponse({ data: "ok" });
break;
default:
sendResponse({ error: `message action is unavailable: ${action}` });
}

View File

@@ -6,7 +6,7 @@ import {
} from "./config";
import { getRules, matchRule } from "./libs";
import { getSetting } from "./libs";
import { transPool } from "./libs/pool";
import { fetchUpdate } from "./libs/fetch";
import { Translator } from "./libs/translator";
/**
@@ -14,7 +14,7 @@ import { Translator } from "./libs/translator";
*/
(async () => {
const { fetchInterval, fetchLimit } = await getSetting();
transPool.update(fetchInterval, fetchLimit);
fetchUpdate(fetchInterval, fetchLimit);
const rules = await getRules();
const rule = matchRule(rules, document.location.href);

View File

@@ -1,7 +1,7 @@
import { useEffect } from "react";
import { useState } from "react";
import { transPool } from "../libs/pool";
import { detectLang } from "../libs";
import { apiTranslate } from "../apis";
/**
* 翻译hook
@@ -25,7 +25,7 @@ export function useTranslate(q, rule) {
if (toLang.includes(deLang)) {
setSamelang(true);
} else {
const [trText, isSame] = await transPool.push({
const [trText, isSame] = await apiTranslate({
translator,
q,
fromLang,

View File

@@ -1,6 +1,6 @@
import storage from "./storage";
import { STOKEY_MSAUTH, URL_MICROSOFT_AUTH } from "../config";
import { fetchPolyfill } from "./fetch";
import { fetchData } from "./fetch";
const parseMSToken = (token) => {
try {
@@ -34,7 +34,7 @@ const _msAuth = () => {
}
// 缓存没有或失效,查询接口
token = await fetchPolyfill(URL_MICROSOFT_AUTH);
token = await fetchData(URL_MICROSOFT_AUTH);
exp = parseMSToken(token);
await storage.setObj(STOKEY_MSAUTH, { token, exp });
return [token, exp];

View File

@@ -1,11 +1,16 @@
import { isExt, isGm } from "./browser";
import { sendMsg } from "./msg";
import { taskPool } from "./pool";
import {
MSG_FETCH,
MSG_FETCH_LIMIT,
CACHE_NAME,
OPT_TRANS_MICROSOFT,
OPT_TRANS_OPENAI,
DEFAULT_FETCH_INTERVAL,
DEFAULT_FETCH_LIMIT,
} from "../config";
import { msAuth } from "./auth";
/**
* 油猴脚本的请求封装
@@ -47,14 +52,7 @@ const fetchGM = async (input, { method = "GET", headers, body } = {}) =>
* @param {*} request
* @returns
*/
const newCacheReq = async (request, translator) => {
if (translator === OPT_TRANS_MICROSOFT) {
request.headers.delete("Authorization");
} else if (translator === OPT_TRANS_OPENAI) {
request.headers.delete("Authorization");
request.headers.delete("api-key");
}
const newCacheReq = async (request) => {
if (request.method !== "GET") {
const body = await request.text();
const cacheUrl = new URL(request.url);
@@ -66,7 +64,42 @@ const newCacheReq = async (request, translator) => {
};
/**
* 请求数据
* 发起请求
* @param {*} param0
* @returns
*/
const fetchApi = async ({ input, init, useUnsafe, translator, token }) => {
if (translator === OPT_TRANS_MICROSOFT) {
init.headers["Authorization"] = `Bearer ${token}`;
} else if (translator === OPT_TRANS_OPENAI) {
init.headers["Authorization"] = `Bearer ${token}`; // // OpenAI
init.headers["api-key"] = token; // Azure OpenAI
}
if (isGm && !useUnsafe) {
return fetchGM(input, init);
}
return fetch(input, init);
};
/**
* 请求池实例
*/
export const fetchPool = taskPool(
fetchApi,
async ({ translator }) => {
if (translator === OPT_TRANS_MICROSOFT) {
const [token] = await msAuth();
return { token };
}
return {};
},
DEFAULT_FETCH_INTERVAL,
DEFAULT_FETCH_LIMIT
);
/**
* 请求数据统一接口
* @param {*} input
* @param {*} init
* @param {*} opts
@@ -75,9 +108,9 @@ const newCacheReq = async (request, translator) => {
export const fetchData = async (
input,
init,
{ useCache, translator, useUnsafe } = {}
{ useCache, usePool, translator, useUnsafe, token } = {}
) => {
const cacheReq = await newCacheReq(new Request(input, init), translator);
const cacheReq = await newCacheReq(new Request(input, init));
const cache = await caches.open(CACHE_NAME);
let res;
@@ -90,13 +123,12 @@ export const fetchData = async (
}
}
// 发送请求
if (!res) {
if (isGm && !useUnsafe) {
res = await fetchGM(input, init);
// 发送请求
if (usePool) {
res = await fetchPool.push({ input, init, useUnsafe, translator, token });
} else {
res = await fetch(input, init);
}
res = await fetchApi({ input, init, useUnsafe, translator, token });
}
if (!res?.ok) {
@@ -111,6 +143,7 @@ export const fetchData = async (
console.log("[cache put]", err);
}
}
}
const contentType = res.headers.get("Content-Type");
if (contentType?.includes("json")) {
@@ -139,3 +172,19 @@ export const fetchPolyfill = async (input, init, opts) => {
// 油猴/网页
return await fetchData(input, init, opts);
};
/**
* 更新 fetch pool 参数
* @param {*} interval
* @param {*} limit
*/
export const fetchUpdate = async (interval, limit) => {
if (isExt) {
const res = await sendMsg(MSG_FETCH_LIMIT, { interval, limit });
if (res.error) {
throw new Error(res.error);
}
} else {
fetchPool.update(interval, limit);
}
};

View File

@@ -1,12 +1,4 @@
import {
DEFAULT_FETCH_INTERVAL,
DEFAULT_FETCH_LIMIT,
OPT_TRANS_MICROSOFT,
} from "../config";
import { apiTranslate } from "../apis";
import { msAuth } from "./auth";
const _taskPool = (fn, preFn, _interval = 100, _limit = 100) => {
export const taskPool = (fn, preFn, _interval = 100, _limit = 100) => {
const pool = [];
const maxRetry = 2; // 最大重试次数
let maxCount = _limit; // 最大数量
@@ -14,11 +6,16 @@ const _taskPool = (fn, preFn, _interval = 100, _limit = 100) => {
let interval = _interval; // 间隔时间
let timer;
/**
* 任务池
* @param {*} item
* @param {*} preArgs
*/
const handleTask = async (item, preArgs) => {
curCount++;
const { args, resolve, reject, retry } = item;
try {
const res = await fn(args, preArgs);
const res = await fn({ ...args, ...preArgs });
resolve(res);
} catch (err) {
if (retry < maxRetry) {
@@ -71,16 +68,3 @@ const _taskPool = (fn, preFn, _interval = 100, _limit = 100) => {
},
};
};
export const transPool = _taskPool(
apiTranslate,
async ({ translator }) => {
if (translator === OPT_TRANS_MICROSOFT) {
const [token] = await msAuth();
return { token };
}
return {};
},
DEFAULT_FETCH_INTERVAL,
DEFAULT_FETCH_LIMIT
);

View File

@@ -3,10 +3,9 @@ import ReactDOM from "react-dom/client";
import Action from "./views/Action";
import createCache from "@emotion/cache";
import { CacheProvider } from "@emotion/react";
import { fetchUpdate } from "./libs/fetch";
import { getRules, matchRule } from "./libs";
import { getSetting } from "./libs";
import { transPool } from "./libs/pool";
import { Translator } from "./libs/translator";
/**
@@ -35,7 +34,7 @@ import { Translator } from "./libs/translator";
// 翻译页面
const { fetchInterval, fetchLimit } = await getSetting();
transPool.update(fetchInterval, fetchLimit);
fetchUpdate(fetchInterval, fetchLimit);
const rules = await getRules();
const rule = matchRule(rules, document.location.href);
const translator = new Translator(rule);