首頁手記 fetch demos 簡單總結

fetch demos 簡單總結

標簽：

JavaScript

fetch demos

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Demo fetch</title>
</head>

<body>
<button onclick="getText()">getText()</button>
<button onclick="getJSON()">getJSON()</button>
<button onclick="postJSON()">postJSON()</button>
<button onclick="head()">head()</button>
<button onclick="postCookie()">postCookie()</button>
<button onclick="postBodyFormdata()">postBodyFormdata()</button>
</body>
<script>
    function getText() {
        fetch('./a.json')
        .then(response=>response.text())
        .then(text=>alert(text))
    }
    function getJSON() {
        fetch('./a.json', {
            headers: {
                userHeader: 'myHeader'
            }
        })
        .then(response=>response.json())
        .then(json=>alert(JSON.stringify(json)))
    }
    function postJSON() {
        var headers = new Headers();
        headers.set('userHeader', 'myHeader');
        headers.append('Content-type', 'application/x-www-form-urlencoded');
        var request = new Request('./a.json', {
            headers: headers,
            method: 'POST'
        });
        fetch(request)
        .then(response=>response.json())
        .then(json=>alert(JSON.stringify(json)))
    }
    function head() {
        fetch('./a.json', {
            method: 'HEAD'
        }).then(response=> {
            alert(response.headers.get('Response-key'))
        })
    }
    function postCookie() {
        fetch('./a.json', {
            method: 'POST',
            credentials: 'include',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: 'test=test'
        })
        .then(response=>response.json())
        .then(json=>alert(JSON.stringify(json)))
    }
    function postBodyFormdata() {
        var formData = new FormData();
        formData.set('key', 'value');
        fetch('./a.json', {
            method: 'POST',
            headers: {
                'userHeader': 'This is my header!'
            },
            credentials: 'include',
            body: formData
        })
        .then(response=>response.json())
        .then(json=>alert(JSON.stringify(json)))
    }

</script>

</html>

點擊查看更多內容