fetch請求和ajax請求

ajax

1.是XMLHTTPRequest的一個實例

2.只有當狀態為200或者304時才會請求成功

3.格式零散，容易出現回調地獄的問題

fetch

1.fetch是基於promise實現的，也可以結合async/await

2.fetch請求默認是不帶cookie的，需要設置fetch（URL，{credentials:’include’})。 

Credentials有三種參數：same-origin，include，*

3.服務器返回400 500 狀態碼時並不會reject，只有網絡出錯導致請求不能完成時，fetch才會被reject

4.所有版本的 IE 均不支持原生 Fetch

5.fetch是widow的一個方法

 

簡單例子：

fetch(url).then(function (response) {
    return response.json()   //執行成功第一步
}).then(function (returnedValue) {
    //執行成功的第二步
}).catch(function (err) {
    //中途的任何地方出錯  都會在這里被捕獲到
})

注意：
fetch 的第二參數中
1、默認的請求為get請求 可以使用method:post 來進行配置 
2、第一步中的 response有許多方法 json() text() formData()
3、Fetch跨域的時候默認不會帶cookie 需要手動的指定 credentials:'include'

使用fetch之后得到的是一個promise對象 在這個promise對象里邊再定義執行成功的時候是什么。下面是正確的fetch的使用方法

 var promise=fetch('http://localhost:3000/news', {
        method: 'get'
    }).then(function(response) {
             return  response.json()
    }).catch(function(err) {
        // Error :(
    });
    promise.then(function (data) {
          console.log(data)
    }).catch(function (error) {
        console.log(error)
    })

//練習一, 使用get 和post方式獲取數據

//將事件放在組件外部
function getRequest(url) {
    var opts = {
        method:"GET"
    }
    fetch(url,opts)
        .then((response) => {
            return response.text();  //返回一個帶有文本的對象
        })
        .then((responseText) => {
            alert(responseText)
        })
        .catch((error) => {
            alert(error)
        })

}

//Post方法, 需要請求體body
/*
* FromData
* 主要用於序列化表單以及創建與表單格式相同的數據
*
* var data = new FormData();
* data.append("name","hello");
* append方法接收兩個參數,鍵和值(key,value),分別表示表單字段的名字 和 字段的值,可添加多個
*
* 在jQuery中,"key1=value1&key2=valu2" 作為參數傳入對象框架,會自動分裝成FormData形式
* 在Fetch 中,進行post進行post請求,需要自動創建FormData對象傳給body
*
* */
function postRequest(url) {
    //將"key1=value1&key2=valu2" 形式封裝整FromData形式
    let formData = new FormData();
    formData.append("username","hello");
    formData.append("password","1111aaaa");

    var opts = {
        method:"POST",   //請求方法
        body:formData,   //請求體
　　　　　headers: {
   　　　　 'Accept': 'application/json',
   　　　　 'Content-Type': 'application/json',
 　　　　 },

    }

    fetch(url,opts)
        .then((response) => {
//你可以在這個時候將Promise對象轉換成json對象:response.json()
    //轉換成json對象后return，給下一步的.then處理
            return response.text
        })
        .then((responseText) => {
            alert(responseText)
        })
        .catch((error) => {
            alert(error)
        })
}

fetch和ajax 的主要區別

1、fetch()返回的promise將不會拒絕http的錯誤狀態，即使響應是一個HTTP 404或者500 
2、在默認情況下 fetch不會接受或者發送cookies

使用fetch開發項目的時候的問題

1、所有的IE瀏覽器都不會支持 fetch()方法
2、服務器端返回 狀態碼 400 500的時候 不會reject