Promise에 대한 지식 배우기
23583 단어 JavaScriptajaxtech
Promise와 멍에?
사이트 축소판 그림
Promise 객체는 비동기 처리를 처리하는 기능입니다.흔히 볼 수 있는'(.then)이 바로 이거죠.
예전에, "이게 뭐야? 난 몰라."이렇게 됐어.
어떻게 쓰는 게 좋을까요?
Ajax 또는 Firebase SDK JS를 사용하는 경우 비동기 프로세싱을 수행합니다.
Qita가 쓴 기사이니 참고해주세요.
이것은 매우 많은 견본을 만든 하나의 예다.
index.js
/*Promiseで直列処理をしたい
外部データを取得して後続処理に繋げたいとき
*/
Promise.resolve()
.then(() => {
new Promise((resolve) => {
setTimeout(() => {
console.log('1つ目のPromise', new Date().toLocaleTimeString());
resolve();
}, 1000);
})
})
.then(
() => new Promise((resolve) => {
setTimeout(() => {
console.log('2つ目のPromise', new Date().toLocaleTimeString());
resolve();
}, 1000);
})
);
// await・asyncを使った記述
start();
async function start() {
await new Promise((resolve) => {
setTimeout(() => {
console.log('1つ目のPromise', new Date().toLocaleTimeString());
resolve();
}, 1000);
});
await new Promise((resolve) => {
setTimeout(() => {
console.log('2つ目のPromise', new Date().toLocaleTimeString());
resolve();
}, 1000);
});
}
실행 결과
1つ目のPromise 14:06:52
1つ目のPromise 14:06:52
2つ目のPromise 14:06:52
2つ目のPromise 14:06:53
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Promise</h1>
<script>
fetch('https://jsonplaceholder.typicode.com/users/')
.then((data) => data.json())
.then((obj) => {
console.log(obj)
})
</script>
</body>
</html>
Async await라는 것도 있어요.
이거 많이 쓰이던데.🤔
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>async awaitの場合</h1>
<p>短くかけるよ!</p>
<script>
async function load() {
// ファイルを読み込む
const data = await fetch('https://jsonplaceholder.typicode.com/users/');
// JSONとして解析
const obj = await data.json();
console.log(obj);
}
// 関数を実行する
load();
</script>
</body>
</html>
최후
최근에 axios를 사용해서 aax를 진행하는 것 같아서 너무 열심히 공부할 필요가 없어요.
개념을 이해하면 된다.
HTTP 통신에 대한 지식이 필요하기 때문에 get,post,put,delete의 방법을 이해하는 것부터 React와 Django로 애플리케이션을 만들 때정말 혼란스럽네요.😵💫
첫 번째 학자가 쉽게 배울 수 있는 프로그래밍 언어부터 배우는 것이 아니라 웹학과 엔지니어를 목표로 한다면 웹의 지식이 필요하다.
HTTP, TCP/IP, OSI 참조 모델전문 용어가 너무 많아요!!!
KITAMI식 일러스트 IT 강습반의 기본 정보 기술자의 책을 추천합니다.🧑🏼🎓
데스패치는 뭐야?
최신판
이 책을 읽으면 웹 커뮤니케이션을 이해할 수 있으므로 권장합니다.🧑🏼🎓
Reference
이 문제에 관하여(Promise에 대한 지식 배우기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/joo_hashi/articles/7ed240e0c541d9텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
