blog

JS非同期 - クロスドメイン

次のコードは1 -> 2 -> 3という順序で書かれていますが、実行順序は1 -> 3 -> 2です。これは非同期です。 同期:タスクが完了するまで、結果を得るために、次のタスクの前に待たなければなり...

Sep 3, 2020 · 4 min. read
シェア

この記事では、以下について簡単に説明します。

  • 非同期と同期
  • コールバック関数
  • Promise
  • クロスドメイン
  • 相同戦略
  • CORS
  • JSONP

非同期と同期

非同期:タスクの終了を待たずに次のタスクを直接実行。

次のコードは1→2→3の順に書かれていますが、1→3→2の順に実行されます。これは非同期です。

console.log(1) setTimeout(function(){ console.log(2) },0) console.log(3)

同期:次のタスクを実行する前に、タスクが終了して結果を得るのを待つ必要があります。

function A = function(){ return 'タスクの戻り値を同期させる' } var result = A() // そして、結果は同期タスクの結果である。 B() // そして次のタスクを実行する

同期:すべての操作はユーザーに結果を返す前に行われます。つまり、データベースを書き込んだ後、ユーザーに応答するため、ユーザーエクスペリエンスは良くありません。

非同期:すべての操作が完了するまで待つ必要はありません、ユーザーの要求に対する応答。つまり、最初にユーザーの要求に応答し、ゆっくりとデータベースを書きに行く、ユーザーエクスペリエンスが向上します。

同期・非同期の判定方法は?

関数の戻り値がsetTimeout、AJAX、addEventListenerの中にある場合、関数は非同期です。

コールバック関数

他の人に使ってもらうために書く関数は、コールバック関数です。

Promise

promiseは非同期プログラミングのためのソリューションです。構文的には、promiseは非同期操作に関するメッセージを取得できるオブジェクトです。本質的には、promiseはある一定期間後に結果を返すことを約束するものです。promiseには3つの状態があります:pending(保留)、fulfilled(達成)、rejected(拒否)。一度変更された状態は二度と変更されません。promiseインスタンスが生成されると、即座に実行されます

プロミスは2つの問題を解決するために使われます:

  • コールバック地獄は、コードのメンテナンスが難しく、しばしば最初の関数の出力が2番目の関数の入力になります。
  • Promiseは複数の同時リクエストをサポートし、同時リクエストからデータをフェッチすることができます。

クロスドメイン

ブラウザがあるドメインのウェブページから別のドメインのリソースを要求する場合、ドメイン名、ポート、プロトコルに違いがあり、これらはすべてクロスドメインです;

これは、ブラウザが他のウェブサイトのスクリプトを実行できないことを意味します。これはブラウザの同一生成元ポリシーによるもので、ブラウザがjavascriptに課すセキュリティ制限です。

相同戦略

same-originの定義: 2つのURLのプロトコル、ドメイン名、ポート番号が同じであれば、その2つのURLはsame-originです。

ソース: 現在のソースを取得するために、任意のブラウザでwindow.originまたはlocation.originを印刷します。

ソース=プロトコル+ドメイン名+ポート番号

同一オリジンポリシーの定義: ブラウザの規定では、ソースAでJSが実行された場合、ソースAのデータのみを取得することができ、ソースBのデータを取得することはできません、つまり、クロスドメインを許可しません。目的はユーザーのプライバシーを保護することです。

CORS

CORS: クロスオリジンリソース共有

異なるソース間のデータアクセスの問題を解決することです。

アクセスされたソースのレスポンスヘッダで、誰がこのデータにアクセスできるかをあらかじめ宣言しておきます。"http://dong.com:9990 "はアクセス可能です!

response.setHeader("Access-Control-Allow-Origin", "http://.:90");

しかし、IE 6, 7, 8, 9はCORSをサポートしていません。

JSONP

JSONP: クロスドメインブラウザでは、corsをサポートしていない、あなたはクロスドメインに別の方法を使用する必要がありますので、jsファイルのリクエストは、jsファイルは、コールバック、データ内部のコールバックを実行します、コールバック関数名は乱数、バックエンドへのコールバックパラメータの名前をすることができます、バックエンドは、このパラメータと実行に戻ります;

利点: ie互換、クロスドメイン可能

欠点: スクリプトタグなので、ステータスコードとレスポンスヘッダを取得できず、成功と失敗しかわかりません。

1.jsonpクロスドメインの方法は、新しいjsファイルを作成することである。{{data}}
2.バックエンドのルートでは、jsonデータファイルを文字列にする。
3.そして、jsファイルを文字列にする
4.へのアクセスを許可するかどうかを判断し、それをjson文字列に置き換える。{{data}}

これはクロスドメインアクセスを可能にしますが、まだ問題があります!

解決策:へのアクセスを許可するかどうかを判断するルートで、refererによってチェックされます。

Read next

イーサの5周年を祝うもの

今日、コミュニティのほとんどのメンバーは、イーサが次に成し遂げようとしているあらゆることについて考えていますが、それと同じくらい重要なこととして、この 5 周年の節目に、イーサがこれまでいかに信じられないほど道を切り開いてきたか、あらゆる回り道がいかに茨の道であったか、そしてすべての

Sep 3, 2020 · 2 min read