fetch api

21631 ワード
Fetch JavaScript テキストリンク
必要に応じてサーバにネットワークリクエストを送信し、新しい情報を受信できるようにします.
「ASynchronous JavaScript And XML、非同期JavaScript、XML」という用語を聞いたことがあるかもしれません.AJAXはサーバに非同期で追加情報を取得させる技術です!

ajaxタイプ

  • XHR
  • jQuery
  • fetch
    • 3種類でjQueryとfetchを使用したことがありますが、XHRを使用したことはありません...パス.jQueryとfetchが一番役に立つみたい!!
    👌プロジェクトの進行中にajaxを使用して処理する必要があります.
    最近はjqueryよりバニラjsでjsの練習が好きだそうです
    vanillajsで実現することにしました!!

    fetchとjqueryの違い!

    fetch()から返されたPromiseオブジェクトはHTTP error状態を返さない!HTTP Status Code返却404または500も同様である.
    逆に、okステータスがfalseのresolveに戻り、ネットワーク障害またはリクエストが完了していない場合はrejectに戻ります.
    通常、fetchはビスケットを送信または受信しません.サイトがユーザー・セッションを維持する必要がある場合、許可されていないリクエストが発生します!!クッキーを転送するには、認証オプションを設定する必要があります!
    ソースMDN:https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

    fetchデフォルト構文(GET)

    	// 일반적인 GET요청 시 작성하는 문법이다.
	fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data)); //자바스크립트 객체로 변환한다!
  .catch(error => console.log(error));
    fetch()関数は、1番目のパラメータをURL、2番目のパラメータをオプションオブジェクトとして、Promiseタイプのオブジェクトを返します!
    返されたオブジェクトは、API呼び出しに成功したときに.thenで解析オブジェクトを返し、失敗したときに.catchで拒否オブジェクトを返します.

    fetchデフォルト構文(POST)

    fetch("http://example.com/movies.json/post", {
  method: "POST", 	// GET도 넣을 수는 있지만 안넣어도 상관없다. default는 get
  headers: {
    "Content-Type": "application/json",	// json형식의 값을 넘겨줌을 header에 명시
  },
  body: JSON.stringify({	//javascript 객체를 json객체로 변환한다.
    title: "Test",
    body: "I am testing!",
    userId: 1,
  }),
})
  .then((response) => response.json())
  .then((data) => console.log(data))
    ヘッダーはnewを生成できます!let myHeaders = new Headers();を生成することができる.
    生成されたHeaderは、プロパティを追加、削除、クエリーできます.
    次の方法があります.append() , delete() , entries() , forEach() , get() , has() , keys() , set() , values() , getAll()

    新しいタイトルを作成して挿入

    	let myHeaders = new Headers();

	myHeaders.append('Content-Type', 'text/xml');
	myHeaders.get('Content-Type')

	fetch("http://example.com/movies.json/post", {
        method: "POST", 	// GET도 넣을 수는 있지만 안넣어도 상관없다. default는 get
        headers: myHeaders,
        body: JSON.stringify({	//javascript 객체를 json객체로 변환한다.
          title: "Test",
          body: "I am testing!",
          userId: 1,
        }),
      })
        .then((response) => response.json())
        .then((data) => console.log(data))

    fetchデフォルト構文(PUT)

    fetch("http://example.com/movies.json/put", {
  method: "PUT",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "Test",
    body: "I am testing!",
    userId: 1,
  }),
})
  .then((response) => response.json())
  .then((data) => console.log(data))
    方法はPUTができる以外、POSTとあまり変わらない!

    fetchデフォルト構文(DELETE)

    fetch("http://example.com/movies.json/post1", {
  method: "DELETE",
})
  .then((response) => response.json())
  .then((data) => console.log(data))
    送信するデータがなく、bodyやheaderがありません!

    ⁉csrfトークン送信


    プロジェクト進行中、springsecurity POSTを申請する際に、フロントでcsrfコインを一緒に渡すべき方法を見つけました!
    方法は簡単です!
    1.htmlファイルhead部分に以下の_csrf値を含むmetaラベルを配置します!
    	<head>
    <meta id="_csrf" name="_csrf" content="{{_csrf.token}}"/>
    <meta id="_csrf_header" name="_csrf_header" content="{{_csrf.headerName}}"/>
	</head>
    上の例ではspringtemplateひげを使用しています.内容には{}が含まれています.
  • fetchでは、ヘッダ部分に対応するcsrfトークン値を得ることができる.
    • 	//방법 1
	const header = document.querySelector('meta[name="_csrf_header"]').content;
    const token = document.querySelector('meta[name="_csrf"]').content;

	fetch("/test/user", {
            method: "POST",
            headers: {
                'header': header,
                "Content-Type": "application/json"
                'X-CSRF-Token': token	// header에 X-CSRF-Token부분에 토큰값이 들어가 정상적으로 POST값이 넘어가는 것을 볼 수 있다!
            },
            body: JSON.stringify(postData)
        })
	//방법2
	fetch("/test/user", {
            method: "POST",
            headers: {
                'header': document.querySelector('meta[name="_csrf"]').content,
                "Content-Type": "application/json"
                'X-CSRF-Token': document.querySelector('meta[name="_csrf_header"]').content;
      // 바로 X-CSRF-Token에 값을 주는 법!
            },
            body: JSON.stringify(postData)
        })
    上のコードを完成すれば、正常にコインを渡すことができます!⭐
    何か変なところや修正が必要なところがあったらコメントをお願いします!
    注意:
    https://developer.mozilla.org/ko/docs/Web/API/Fetch_API
    https://velog.io/@sham/Fetch%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80#%EC%9E%91%EB%8F%99-%EB%B0%A9%EC%8B%9D
    https://velog.io/@prayme/Fetch-API#post-%EC%9A%94%EC%B2%AD%ED%95%98%EA%B8%B0
    JAVAベース-12
    プログラマステップ1[キーボードを押す]