JavaScript 학습 구현 노트 5

이것은 첫 번째 학자의 필기다.만약 착오가 있다면 당신의 평론을 기다리세요.
다섯 번째.재고가 없으면 저장하는 형식으로 할게요.
마지막: https://zenn.dev/yuki_kanayama/articles/3c37943989b79d
초회: https://zenn.dev/yuki_kanayama/articles/37022f0373e38d

Promise

비동기 처리는 가독성을 높이는 것으로 더욱 간단하게 묘사될 수 있다.

1. // resolve の場合は then が実行される。
2. new Promise(function (resolve, reject) {
3.   resolve("hello!");
4. }).then(function (data) {
5.   console.log(data); // -> "hello"
6. }).catch(
7.  
8. ).finally(function () {
9.   console.log("終了処理");
10. });
11.  
12. // reject の場合は catch が実行される。
13. new Promise(function (resolve, reject) {
14.   reject("bye!");
15. }).then(
16. ).catch(function (data) {
17.   console.log(data); // -> "bye!"
18. }).finally(function () {
19.   console.log("終了処理");
20. });

1. new Promise(
2.   同期処理
3. ).then(
4.   非同期処理（resolveを待つ）
5. ).catch(
6.   非同期処理（rejectを待つ）
7.  
8. ).finally(
9.   非同期処理（then、またはcatchを待つ）
10. );

Promise 체인

1. function sleep(val) {
2.   return new Promise((resolve) => {
3.     setTimeout(() => {
4.       console.log(val++);
5.       resolve(val);
6.     }, 1000);
7.   });
8. }
9.  
10. sleep(0)
11.   .then(function (val) {
12.   return sleep(val);
13.   })
14.   .then(function (val) {
15.     return sleep(val); // sleep(val)が実行 => Promiseのインスタンスが return される。それがさらにreturnされることでチェーンがつながる。
16.   })
17.   .then(function (val) {
18.     return sleep(val);
19.   })
20.   .then(function (val) {
21.     return sleep(val);
22.   })
23.  
24. // アロー関数を使用する場合
25. sleep(0)
26.   .then(val => sleep(val))
27.   .then(val => sleep(val))
28.   .then(val => sleep(val))
29.   .then(val => sleep(val))
30.   .then(val => sleep(val))
31.   .then(val => sleep(val))

Promise와 병행 처리

all 방법

Promise 병렬 처리를 수행하는 방법매개변수에서 반복 가능한 개체(Arry 등)의 Promise 인스턴스를 설명합니다.의 처리가 모두 완료되면 다음 처리로 넘어갑니다.

레이스 방법

배열에서 전달된 첫 번째 실례가 완성되면 다음 처리를 실행합니다.

allSettled 메서드

all의 차이점은 프로젝트가 호출될 때catch로 처리되지만, all Settled는then이라고만 불린다.

매크로 작업과 마이크로 작업

매크로 작업

이전 강연에서는 임무 대열이라고 불렸다.내 차례가 되었을 때 하나씩 임무를 집행하다.
예:setTimeout setInterval requestAnimateonFrame기다리다

미임무

작업 대기열과 분리된 비동기 처리 대기열입니다.별명: 작업 대기열 순서가 자신의 차례일 때 모든 작업을 수행합니다.
예:Promises queueMicrotask MutationObserver기다리다

Await / Async

Promise의 내용을 보다 직관적으로 기술할 수 있도록 합니다.

Async

선언은 Promise의 함수를 반환합니다.성명된 함수에return의 설명이 없어도Promise의 빈 실례를 되돌려줍니다.

Await

Promise 함수의 비동기 처리가 완료될 때까지 기다립니다.
예:

1. function sleep(val) {
2.   return new Promise(function(resolve) {
3.     setTimeout(function() {
4.       console.log(val++);
5.       resolve(val);
6.     }, 1000);
7.   });
8. }
9.  
10. async function init() { // async がないとエラー
11.   let val = await sleep(0); // resolve が渡す引数を変数に代入する。
12.   val = await sleep(val);　// 受け取った引数を再代入しもう一度実行。
13.   val = await sleep(val);
14.   val = await sleep(val);
15.   val = await sleep(val);
16.   val = await sleep(val);
17.   return (val); // then が実行
18.   throw new Error(); // catch が実行
19. };
20.  
21. init().then(val => {
22.   console.log('then: ' + val);
23. }).catch(() => { 
24.   console.log('catch');
25. })

1. 実行結果
2. 0
3. 1
4. 2
5. 3
6. 4
7. 5
8. then: 6

fetch

서버에서 데이터를 얻을 수 있는 함수입니다.반환된 값은 Promise의 인스턴스입니다.그래서 then 방법을 사용할 수 있다.

파일 목록

Javascript에서 서버의 데이터를 가져올 때 서버에 데이터를 요청할 때 사용합니다.Javascript와 유사한 설명 형식입니다.주로 세 가지가 다르다.

단일 인코딩은 사용할 수 없습니다.

속성에 대한 이중 인코딩이 필요합니다.

마지막 요소에 쉼표를 붙이면 오류가 발생합니다.

1. fetch('users.json')
2.   .then((val) => {
3.     // console.log(val);
4.     return val.json();
5.   })
6.   .then((json) => {
7.     console.log(json);
8.     for (const user of json) {
9.       console.log(`I am ${user.name}, ${user.age} years old!`)
10.     }
11.   })
12.  
13. // Async / Await を使用する場合
14. async function fetchUsers() {
15.   let val = await fetch('users.json');
16.   let json = await val.json();
17.   for (const user of json) {
18.     console.log(`I am ${user.name}, ${user.age} years old!`);
19.   }
20. }
21. fetchUsers();

예외 처리 및 오류

예외 처리

오류가 발생했을 때 건너뛰는 특수 처리입니다.

1. try {
2.   throw new Error()
3. } cache(e) {
4.   エラーハンドリング
5. }　finally {
6. 

ES Modules 및 Common JS

모듈

원본 코드를 기능에 따라 분할하여 유지보수에 편리한 구조.대표적으로 ESM(ES 모듈)과 CJS(Common JS)가 있다.

Common JS

Node.js의 모듈 관리 시스템.require/exports를 사용합니다.

ES 모듈

ECMAScript에서 사용하는 모듈 관리 시스템입니다.주로 브라우저 측면에서 사용됩니다.import/export를 사용합니다.
주요 차이점

1.           ESM         vs.         CJS
2.      import/export          require/exports
3.         ブラウザ                  Node.js
4.          .mjs                    .cjs

ESModule 및 즉시 함수

모듈 컨텍스트

거의 전역 상하문과 같다.그러나 모듈 상하문에서this를 사용할 수 없습니다.(Windows 참조되지 않음)

모듈 역할 영역

모듈 간의 역할 영역.export/import를 사용하지 않으면 변수를 참조할 수 없습니다.

모듈 특징

모듈 동작

읽기 모듈을 비동기적으로 처리합니다.따라서 HTML의 구문 분석이 완료된 후에 실행됩니다.또 HTML 측면에서 같은 모듈을 여러 번 읽거나 import에서 여러 번 읽어도 한 번만 실행한다.

nomodule

1. <script nomodule>alert('表示したいテキスト') </script>

이렇게 설명하면 모듈이 지원되지 않는 브라우저(IE 등)에 경보를 표시할 수 있습니다.