HamSungJun / FetchAPI

XMLHttpRequest를 대체하는 최신 데이터 통신 API

Fetch API

Fetch

    # Fetch 참고사항
        - HTTP error 상태를 reject 하지 않는다.
        - 기본적인 쿠키 헤더를 보내거나 받지 않고 credentials 옵션을 이용한다.
        
    # Basic Usage
    
        fetch(<URL of Resource>)
        .then((response) => {
            return response.json() || response.blob() || ...
        })
        .then((json||blob) => {
            let objectURL = URL.createObjectURL(blob)
            myImage.src = objectURL
        })
        
    # Applying Headers
    
        let myHeaders = new Headers()
        
        let myInit = {
            method: 'GET || POST || ...',
            headers: myHeaders,
            mode: 'cors',
            cache: 'default'
        }
        
        fetch(<URL of Resource>, myInit)

---

Headers

    # Basic Usage
    
        let content = "Hello World"
        let myHeaders = new Headers()
        myHeaders.append("Content-Type", "text/plain")
        myHeaders.append("Content-Length", content.length.toString())
    
    # Checking Header Content (Bool)
        
        let myHeaders = new Headers()
        myHeaders.has("Content-Type") => true || false
        
    # Setting & Getting Header
    
        let myHeaders = new Headers()
        myHeaders.set("Content-Type", "text/html")
        myHeaders.get("Content-Type") => "text/html"
        
    # Delete Header
    
        let myHeaders = new Headers()
        myHeaders.delete("Some Header")
        

Type Checking

    
    # Check Type of Response Content Type
    
    fetch(Request).then((response)=>{
        
        let contentType = response.headers.get('Content-Type')
        
        if(contentType && contentType.indexOf("application/json") !== -1){
            return response.json()
        }
        else{
            console.log("Content-Type is not application/json")
        }
        
    })
    

Body

    # Types of Body
    
        - ArrayBuffer
        - Blob/File
        - String
        - URLSearchParams
        - FormData