Technology sharing

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

🧑‍💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣

1. Quomodo xmlHttpRequest petitionem excludit?

Est etiam methodus abortus in obiecto instantiato XMLHttpRequest.

const xhr = new XMLHttpRequest();
xhr.addEventListener('load', function(e) {
  console.log(this.responseText);
});
xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1');
xhr.send();

1
2
3
4
5
6
7

// 返回
{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

1
2
3
4
5
6
7
8

Si statim post abortum mittere, destruant

// xhr的取消操作：执行过程比较模糊，不知道abort什么时机进行处理
xhr.abort()

1
2
3

Si petitionem in timer rescindis (cum timer tempus est similis durationi interfaciei), invenies impetrata subsidia, sed nullum vestigium in console.

2. AbortController

const ac = new AbortController();
const { signal } = ac;
const url = "https://jsonplaceholder.typicode.com/todos/1";
​
fetch(url, { signal })
  .then((res) => res.json())
  .then((json) => console.log(json));

1
2
3
4
5
6
7
8

Utere abort directe excludit petitionem

ac.abort()

1
2

Ratio erroris hic relata est quia error non fuit captus.

// 修改后的代码
fetch(url, { signal: ac.signal })
  .then((res) => res.json())
  .then((json) => console.log(json))
  .catch(e => console.log(e)) // DOMException: signal is aborted without reason
ac.abort() // abort接受一个入参，会被传递到signal的reason属性中

1
2
3
4
5
6
7

Quare sic demi potest?

affer monitores status rei signum et terminare petitionem

2.1 Quomodo multas petitiones simul excludit?

const ac = new AbortController();
const { signal } = ac;
const url = "https://jsonplaceholder.typicode.com/todos";
​
const todoRequest = (id, { signal }) => {
  fetch(`${url}/${id}`, { signal })
    .then((res) => res.json())
    .then((json) => console.log(json))
    .catch((e) => console.log(e)); // DOMException: signal is aborted without reason
};
​
todoRequest(1, { signal });
todoRequest(2, { signal });
todoRequest(3, { signal });
​
ac.abort("cancled");

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2.2 AbortSignal

est interface ad significandum objectum insigne quod sinit vos communicare cum operatione asynchrono perficiendi ut operatio abortus fieri possit antequam perficiatur.

2.3 AbortSignal methodo

2.3.1 abort

Statica methodus ad abortum AbortSignal creare obiectum. Cum hanc methodum appellas, instantiam AbortSignalem reddit cum status veri abortivi.

const signalAbout = AbortSignal.abort(); // AbortSignal {aborted: true, reason: DOMException: signal is aborted without reason...}

1
2

2.3.2 throwIfAborted methodo

Inhibere solebat num abortus abortSignal antequam codicem exsecutioni mandaret. Si AbortSignal abortus est, abortError mittet. Haec methodus tincidunt adiuvare potest ut abortivi non sint antequam operationem specificam exerceant ad processus necessarias vitandas.

const signalAbout = AbortSignal.abort('abortedReason');
try {
    signalAbout.throwIfAborted(); // 抛出error： abortedReason
} catch (error) {
    console.log(error);
}

1
2
3
4
5
6
7

2.3.3 timeout

Solebat creare objectum AbortSignal quod sponte terminatur post tempus praefinitum. Hoc utile est, cum debes petitionem timeout.

// 使用 AbortSignal.timeout 设置 10ms超时
const signalAbout = AbortSignal.timeout(10);
const todoRequest = (id, { signal }) => {
  fetch(`${url}/${id}`, { signal })
    .then((res) => res.json())
    .then((json) => console.log("json: ", json))
    .catch((e) => console.log("err: ", e)); //DOMException: signal timed out 
};
todoRequest(1, { signal: signalAbout });

1
2
3
4
5
6
7
8
9
10

2.3.3.1 res auditor => a non terminatur ad terminatum

AbortSignal hereditates ex EventTarget, quia AbortSignal audiebant pro eventibus abort, et EventTarget mechanismum praebet ad augendum, removendum et eventum felis auditores.

const signalAbout = AbortSignal.timeout(10);
signalAbout.addEventListener("abort", (e) => {
    console.log("aborted: ", e);
})
​

1
2
3
4
5
6

Typographia e talis est:

3. deducendi proactively remittantur promissionem

const ac = new AbortController();
const { signal } = ac;
​
const cancelablePromise = ({signal}) => 
    new Promise((resolve, reject) => {
        // 情况1：直接主动取消
        signal?.throwIfAborted(); // 也可以用reject
​
        // 情况2：正常处理业务逻辑
​
        setTimeout(() => {
            Math.random() > 0.5 ? resolve('data') : reject('fetch error');
        }, 1000);
​
        // 情况3：超时 todo?
​
        // 监听取消
        signal.addEventListener("abort", () => {
            reject(signal?.reason);
        });
    })
// 发起网络请求
cancelablePromise({signal})
.then(res => console.log('res: ', res))
.catch(err => console.log('err: ', err))
// 情况1 
// ac.abort('用户离开页面了') // err:  用户离开页面了
​
// 情况2 正常请求 err:  fetch error || res:  data

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

4. Quomodo signum ad tollendam eventum audiendum utendum?

Cum plures eventus auditores ad elementum accedunt, non necesse est ut auferatur sicut removere EventListener. Quisque eventus semel delendus est, et eventus tractans eventus respondentis singulis diebus scribendus est.

Cum signo uteris, tantum signum semel inrita debes, et omnis eventus vigilantia delebitur.

const ac = new AbortController();
const { signal } = ac;
const eleA = document.querySelector('#a');
const eleB = document.querySelector('#b');
​
function aEleHandler () {}; // 事件
eleA.addEventListener('click', aEleHandler, {signal}); // 无论绑定多少个事件，都只需要一个signal
​
eleB.addEventListener('click', () => {
    ac.abort(); // 只需要取消一次
})

1
2
3
4
5
6
7
8
9
10
11
12

5. Scenarios ubi plures interfaces petuntur pro notitia conventus

Quomodo excludit hanc continuam retis petitionem cum celeritas retis non est bona?

const ac = new AbortController();
const { signal } = ac;
const fetchAndRenderAction = (signal) => {
    requestData(signal); // 多个串行或者并行的接口
    drawAndRender(signal); // 异步渲染
}
​
try{
    fetchAndRenderAction({signal})
}catch{
    // dosomething...
}

1
2
3
4
5
6
7
8
9
10
11
12
13

6. Libri

Cum actuose utentis paginam relinquit, vel retis utentis valde adhaesit (ordo reditus exspectatus est: interface 1 => interface 2; sed reditus interfaciendi 1 nimis tardus est, ordinem confundendi causans.) Hoc postulat manuale. finis petitionis. Instantia semaphoris signum constructoris AbortController (reponi potest ut ref), signum adhibetur ut parametri arcessendi. In unaquaque re, methodus abortus manualiter vocari potest ut priorem petitionem remittant.

Si tibi prodest, attente gratus es. Documenta technica regulariter renovabo ut omnes simul discutere, discere et proficere possint.