首先不得不吐槽一下fetch的response機制了，真的太麻煩了，當我快放棄的時候，才真正懂得怎麼用

axios使用特別簡單

axios("http://xxx/xxx.json？a=123'").then((r)=>{

    console.log(r)//這裡的r是響應結果

})

但是axios不支援jsonp就比較噁心了，不過我們可以引入jsonp模組，詳細使用前面blog或github和npm用法

另外不建議使用jq進行ajax，畢竟太大了。

而fetch感覺是上了一個檔次一樣，他與axios的區別是他的response是一個綜合各種方法的物件，並不是請求的資料，

我就犯了這樣的錯誤，搞得我都想放棄fetch了

不過感覺機制還是蠻不錯的，返回的是一個未處理的方法集合，我們可以通過這些方法得到我們想要的資料型別

如果我們想要json格式，就執行response.json(),如果我們想要字串就response.text()

而且這些函式是一個promise，想要後臺的資料需要.then才可以

例：fetch('http://xxx/xxx.json？a=123').then(res => {

res.json().then((r)=>{//或者res.text()            console.log(r)//這裡就是處理完的後臺返回的json資料        })

})

另外可以引入fetch-jsonp，即支援fetch也支援fetchJsonp方法

不過這樣也是一個回撥函式，推薦以下的方法（使用return的方式）

1. 請求 json

另外jsonp只支援json，不支援字串text

    fetch('http://xxx/xxx.json？a=123').then(res => {
        return res.json();//這是一個promise
    }).then(res => {
        console.log(res);//向後臺請求的資料
    })

• 1
• 2
• 3
• 4
• 5

2. 請求文字

    fetch('/xxx/page').then(res => {
        return res.text();
    }).then(res => {
        console.log(res);
    })

• 1
• 2
• 3
• 4
• 5

3. 傳送普通 json 資料

    fetch('/xxx', {
        method: 'post',
        body: JSON.stringify({
            username: '',
            password: ''
        })
    });

• 1
• 2
• 3
• 4
• 5
• 6
• 7

4. 傳送form 表單資料

    var form = document.querySelector('form');
    fetch('/xxx', {
        method: 'post',
        body: new FormData(form)
    });

• 1
• 2
• 3
• 4
• 5

5. 獲取圖片

    fetch('/xxx').then(res => {
        return res.blob();
    }).then(res => {
        document.querySelector('img').src = URL.createObjectURL(imageBlob);
    })

• 1
• 2
• 3
• 4
• 5

6. 上傳

    var file = document.querySelector('.file')
    var data = new FormData()
    data.append('file', file.files[0])
    fetch('/xxx', {
      method: 'POST',
      body: data
    })

• 1
• 2
• 3
• 4
• 5
• 6
• 7

封裝

    require('es6-promise').polyfill();
    require('isomorphic-fetch');

    export default function request(method, url, body) {
        method = method.toUpperCase();
        if (method === 'GET') {
            body = undefined;
        } else {
            body = body && JSON.stringify(body);
        }

        return fetch(url, {
            method,
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            body
        }).then((res) => {
            if (res.status >= 200 && res.status < 300) {
                return res;
            } else {
                return Promise.reject('請求失敗！');
            }
        })
    }

    export const get = path => request('GET', path);
    export const post = (path, body) => request('POST', path, body);
    export const put = (path, body) => request('PUT', path, body);
    export const del = (path, body) => request('DELETE', path, body);