प्रौद्योगिकी साझेदारी

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

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

1. xmlHttpRequest अनुरोधं कथं रद्दं करोति?

उदाहरणकृते 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

यदि प्रेषणानन्तरं प्रत्यक्षतया निरस्तं भवति तर्हि रद्दं कुर्वन्तु

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

1
2
3

यदि भवान् समयनिर्धारकस्य समये अनुरोधं रद्दं करोति (यदा समयनिर्धारकस्य अवधिः अन्तरफलकानुरोधकालस्य सदृशः भवति), तर्हि भवान् पश्यति यत् संसाधनं प्राप्तम्, परन्तु कन्सोल् मध्ये मुद्रणं नास्ति

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

अनुरोधं रद्दीकर्तुं प्रत्यक्षतया abort इत्यस्य उपयोगं कुर्वन्तु

ac.abort()

1
2

अत्र निवेदितस्य दोषस्य कारणं दोषः न गृहीतः इति ।

// 修改后的代码
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

किमर्थम् एवं निरस्तं कर्तुं शक्यते ?

fetch सिग्नल् ऑब्जेक्ट् इत्यस्य स्थितिं निरीक्षते तथा च अनुरोधं समाप्तुं शक्नोति

२.१ एकस्मिन् समये बहुविधं अनुरोधं कथं रद्दं कर्तव्यम् ?

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

२.२ AbortSignal इति

एकं संकेतवस्तुं प्रतिनिधितुं प्रयुक्तं अन्तरफलकं भवति यत् भवन्तं क्रियमाणेन अतुल्यकालिकेन क्रियायाः सह संवादं कर्तुं शक्नोति येन क्रियायाः समाप्तेः पूर्वं निरस्तं कर्तुं शक्यते

२.३ AbortSignal विधिः

२.३.१ गर्भपातः

निरस्तं AbortSignal वस्तु निर्मातुं प्रयुक्ता स्थिरविधिः । यदा भवान् एतत् विधिम् आह्वयति तदा एतत् true इत्यस्य निरस्तस्थित्या सह AbortSignal दृष्टान्तं प्रत्यागच्छति ।

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

1
2

२.३.२ throwIfAborted विधिः

कोडस्य निष्पादनात् पूर्वं AbortSignal निरस्तं कृतम् अस्ति वा इति परीक्षितुं प्रयुक्तम् । यदि AbortSignal निरस्तं कृतम् अस्ति तर्हि AbortError क्षिपति । एषा पद्धतिः विकासकानां कृते अनावश्यकसंसाधनं परिहरितुं विशिष्टं कार्यं कर्तुं पूर्वं तेषां निरस्तीकरणं न भवति इति सुनिश्चितं कर्तुं साहाय्यं कर्तुं शक्नोति ।

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

1
2
3
4
5
6
7

२.३.३ समयसमाप्तिः

AbortSignal वस्तु निर्मातुं उपयुज्यते यत् निर्दिष्टसमयानन्तरं स्वयमेव समाप्तं भवति । यदा भवता अनुरोधसमयसमाप्तिः सेट् कर्तव्या तदा एतत् उपयोगी भवति ।

// 使用 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

२.३.३.१ इवेण्ट् श्रोता => असमाप्तात् समाप्तं यावत् योजयतु

AbortSignal EventTarget तः उत्तराधिकारं प्राप्नोति, यतः AbortSignal इत्यस्य उपयोगः गर्भपातघटनानां श्रवणार्थं भवति, तथा च EventTarget घटनाश्रोतृणां योजयितुं, निष्कासयितुं, प्रेरयितुं च तन्त्रं प्रदाति

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

1
2
3
4
5
6

ई इत्यस्य मुद्रणं यथा भवति ।

3. सक्रियरूपेण रद्दं प्रतिज्ञां कार्यान्वितं कुर्वन्तु

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. इवेण्ट् श्रवणं रद्दीकर्तुं सिग्नलस्य उपयोगः कथं करणीयः?

यदा कस्मिन्चित् तत्त्वे बहुविधाः इवेण्ट्-श्रोतारः योजिताः भवन्ति तदा removeEventListener इव तस्य रद्दीकरणस्य आवश्यकता नास्ति, प्रत्येकं इवेण्ट्-इत्यस्य इवेण्ट्-हन्डलं प्रत्येकं लिखितव्यम् ।

संकेतस्य उपयोगं कुर्वन् भवद्भिः केवलं एकवारं संकेतं रद्दं कर्तव्यं भवति, ततः सर्वाणि घटनानिरीक्षणं रद्दं भविष्यति ।

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. परिदृश्यानि यत्र दत्तांशसङ्घटनार्थं बहुविधाः अन्तरफलकाः अनुरोधिताः भवन्ति

यदा जालवेगः उत्तमः नास्ति तदा एतत् निरन्तरं जाल-अनुरोधं कथं रद्दं कर्तव्यम्?

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. सारांशः

यदा उपयोक्ता सक्रियरूपेण पृष्ठं त्यजति, अथवा उपयोक्तुः जालम् अतीव अटति (अपेक्षितः पुनरागमनक्रमः अस्ति: अन्तरफलकम् १ => अन्तरफलकम् २; परन्तु अन्तरफलकम् १ इत्यस्य पुनरागमनम् अतीव मन्दं भवति, येन क्रमः भ्रमितः भवति ।) अस्य कृते मैनुअल् आवश्यकम् अनुरोधस्य समाप्तिः । Constructor AbortController इत्यस्य instance semaphore signal (ref इति रूपेण संग्रहीतुं शक्यते), signal इत्यस्य उपयोगः fetch इत्यस्य पैरामीटर् इत्यस्य रूपेण भवति प्रत्येकस्मिन् अनुरोधे, abort विधिः पूर्वानुरोधं रद्दं कर्तुं मैन्युअल् रूपेण आह्वयितुं शक्यते

यदि भवतः कृते सहायकं भवति तर्हि भवतः स्वागतम् अस्ति यत् अहं नियमितरूपेण तान्त्रिकदस्तावेजान् अद्यतनं करिष्यामि येन सर्वे मिलित्वा चर्चां कर्तुं, शिक्षितुं, प्रगतिम् कर्तुं च शक्नुवन्ति।