WIL|ミニプロジェクト|非同期と同期の完了

ミニプロジェクト完成！

1週間目のプロジェクトはやっと終わった.
曲がりくねった1週間でしたが、
しかし、紆余曲折を経て、プロジェクトを完成させた喜びは言葉では言い表せない.
https://blog.naver.com/rjsgmldnwn/222561254473
最初の項目の感想(?)
https://github.com/dev-sohye/hanghae99_11
結果
その間の曲折と学んだことを整理します.
プロジェクトプロセス

私が演じた役はログインで、会員が機能に参加します.

機能の実装が完了すると、チームメンバーとエリアを分割し、ページ設計を完了します.

最後に美帝の機能を見た.

非同期と同期

(非同期と同期について)

要求

当時はプロジェクト終了の段階だった.デザイン終了後、未完成機能のコメントを削除しました.△しかし、最終的にはプロジェクトが完了した後に機能を実現した.
以前学習した方法は,削除ボタンをクリックしたときにすべてのコメントにキーワードが含まれているコメントを削除することであった.
しかし,コメントウィンドウに複数人で記入でき,各コメントのキーワードが重なる可能性があるため,この手法を適用するにはいくつかの問題がある.そこで、以下の条件が決定されました.

自分で作成した

のみを削除

、重複する内容があっても、選択したコメント

を削除するしかありません.
だからこれは塩辛い流れです.
コメント作成時には、ユーザIDとランダム付与値をコメントDBに記録する.
削除ボタンをクリックすると、そのコメントのランダムな割り当てが得られます.
トークンで現在のユーザIDとそのコメントを作成したユーザIDが同一であることを確認する.
ランダムに割り当てられたコメントを削除します.
このようにプロセスの構想とコードの作成はいくつかの奇妙な問題に直面した.

問題の状況

//리뷰 삭제//

function deleteReview(reviewRandomId) {
          console.log(reviewRandomId);
          let userId;
          let reviewId;
          //토큰 내 유저 id정보 불러오기
          $.ajax({
              type: "GET",
              url: '/api/user',
              data: {},
              success: function (response) {
                  userId = response['user_id'];
                  console.log(userId);
              }
          });
          //리뷰 db 가져오기
          $.ajax({
              type: "GET",
              url: '/api/review',
              data: {},
              success: function (response) {
                  //선택한 리뷰 골라낸 후 유저 id 가져오기
                  for (i = 0; i < response.length; i++) {
                      let randomIdKey = response[i]['review_random_id']; //i번째 리뷰의 랜덤값
                    	//선택한 리뷰가 맞다면
                      if (randomIdKey == reviewRandomId) {
                          reviewId = response[i]['review_id']; //리뷰 작성자 id 할당
                          console.log(reviewId);
                      }
                      ;
                  }
                  ;
                  //<---------#1. 여기는 찍힌다------------>
                  console.log(reviewId, userId);
              }
          });
          //<------------#2. 여기는 안 찍힌다------------->
          console.log(userId,reviewId)
          // 선택한 리뷰 삭제하기
          //생략된 코드//
      };

console.コードの中間の値をlogで確認し、apiで取得した値は、#2部分ではなく一番下の#1部分に印刷されます.2つの部分の違いは、1がajaxの内部にあり、2がajaxの外部にあるだけです.
最初は#2部分にコードを入れて書きましたが、動作していないのでかなり難しいです.(その後jinja 2でバカなことをしてしまいました…)
第1部ではコードを加えて機能実装を完了したが,理解できなかった.

原因の特定

ajaxが非同期であるためです.
JAvascriptエンジンは、コードを実行すると、すべての関数の呼び出しをcall stackという構造に読み込み、順次実行します.
最初はcallスタックが空で、関数に入った瞬間、callスタック構造の上に読み込まれた関数が徐々に蓄積されて実行されます.
次に、スタックされた関数の実行が完了したら、call stackから削除して次の操作を行います.
次の例を見ると分かりやすい.

function multiply(x, y) {
    return x * y;
}
function printSquare(x) {
    var s = multiply(x, x);
    console.log(s);
}
printSquare(5);

上記のコードをcall stackが空の場合に実行すると、エンジンは次の手順に従います.

ソース:sessionstack
以上のように、現在実行されているコードが完了してから、以下のコードを実行する方式を同期方式と呼ぶ.
問題はここにある.JAvascriptは単一スレッドです.すなわち,1つの呼び出しスタックしか構成できず,1つのタスクしか実行できない.
この単一スレッドに問題があります.
単一スレッドcall stackで関数を呼び出し、サーバからデータを受信するのに時間がかかると仮定します.では、ユーザーはデータを受信する過程で何もできません.ページは中間サーバページに更新され、点滅とロードが待機します(長すぎるとエラーが発生する可能性があります).
この現象を「ブロック」と呼び,この現象を解決する方法が非同期である.非同期方式とは、現在実行されているコードに関係なく、次のコードに移動することです.次のように操作します.

(Web API)非同期プロセス

JavaScriptコードを順に実行します.

非同期方式関数が見つかった場合、callスタックに入れます.

WebAPIを呼び出し、callスタックから削除します.

WebAPI処理後、結リンゴ値が得られる.

欠落値CallbackをCallback Queueに入れます.

すべてのスクリプトの実行が完了すると、callスタックが空の場合、callback Queueの関数がcallスタックにインポートされ、実行されます.(このロールはイベントループによって実行されます.)

アクティブサイクル?
callstackとCalback Queueを監視します.callstackが空の場合、callback Queueは最初のイベントをcallstackに格納します.
実は次の1つで終わりました

console.log('Hi');
setTimeout(function cb1() { 
    console.log('cb1');
}, 5000);
console.log('Bye');

ソース:sessionstack
まとめてみると、最終的に私に起こった問題は、Ajaxが非同期で処理されているか、Ajaxの内部に変数がロードされているかで値が変化していることです.

結論(ソリューション)

非同期Ajaxの内部結果値を使用する方法は大きく2つあります.

は、Ajax内部または以降の非同期イベントで使用する必要があります.

async-awaitなどを使用して同期Ajaxリクエストを行う場合は、外部でも使用できます.

ただし、2番目のソリューションでは、上記の単一スレッドの問題のため、使用しないほうがいいです.△ネットワークを破壊する道だと言っていますが、もっと詳細を知る必要があります.
ということで、まずは1番の方法をそのまま持っていきました.

チームプロジェクト。

初めてチームプロジェクトをするときは、メンバーとのコミュニケーションをスムーズにする方法に悩んでいましたが、一番大切なのはやはり配慮です.
そして、みんなで一つの製品を作ったので、今の状況ややるべきことを共有することが大切です.

の最後の部分

このプロジェクトはフロントとバックグラウンドのどちらをするかまだ確定していないので、バックグラウンドとフロントを問わず行います.機能によって位置付けして、ページの設計によって、全体の味わいは体現します
今後、バックエンドを学び、プロジェクトを行い、バックエンドとフロントエンドがどのように協力するかを学びます.
これからも頑張ります!
間違ったところや誤字に変なところがあったらコメントで指摘しましょう!
参考資料
sessionstack
Spicycookie
CodingRestaurant
楽しい人生