ES 6のfetchリクエスト

3513 ワード

基本使用構造:

//    
let url = 'http://jsonplaceholder.typicode.com/posts';
// console.log(fetch(url))//Promise {}    

fetch(url)
    .then(response => response.json())// response                (    )
    .then(data => console.log(data))//                 
    .catch(err => console.log(err))//        ,err      300,        ,             catch

2.fetchは、3つの要求フォーマット

に分ける.

ローカルディレクトリ:

ローカルテキストフォーマット:

HTMLコード:




    
    
    
    Document
    


    
        Fetch Api sandbox

js:テキストリクエストフォーマット;

document.getElementById('button1').addEventListener('click',getText);
// document.getElementById('button2').addEventListener('click',getJson);
// document.getElementById('button3').addEventListener('click',getExternal);

//          
function getText(){
    fetch('text.txt')
        .then((res) => res.text())//    text  
        .then(data => {
            console.log(data);
            document.getElementById('outPut').innerHTML = data;
        })
        .catch(err => console.log(err))
}

クリックの :

ローカルjsonリクエストフォーマット:

document.getElementById('button2').addEventListener('click',getJson);
// document.getElementById('button3').addEventListener('click',getExternal);



//  json  
function getJson(){
    fetch('jsontext.json')
        .then((res) => res.json())//    json  
        .then(data => {
            console.log(data);
            let outPut = '';
            data.forEach((post) =>{
                outPut += `${post.title}`
            })
            document.getElementById('outPut').innerHTML = outPut;
        })
        .catch(err => console.log(err))
}

ネットワークインタフェースのめ :

document.getElementById('button3').addEventListener('click',getExternal);

//    
function getExternal(){
    fetch('https://api.github.com/users')
    .then((res) => res.json())//    json  
    .then(data => {
        console.log(data);
        let outPut = '';
        data.forEach((user) =>{
            outPut += `${user.login}`
        })
        document.getElementById('outPut').innerHTML = outPut;
    })
    .catch(err => console.log(err))

}