用ajax與fetch調用阿裡雲免費介面

　　最近學習態度比較積極，打算用react做一個小個人應用網站...所以從阿裡雲上買了些免費的介面，什麼QQ音樂排行查詢介面、IP地址查詢、天氣預報等等。調用時，發現身份校驗可以通過簡單修改頭部信息的方式，即向頭部加入APPCODE的key，以及相應的值。

　　但是之前沒有用過請求頭添加 　　so 記錄學習下...

一、首先直接放demo

1、jQuery

var requestUrl = "http://ali-qqmusic.showapi.com/top?topid=6";
$.ajax({
    type : "get",
    url : requestUrl ,
    dataType : "json" ,
    success: function(data) {
        console.log(data);
    }.bind(this),
    beforeSend: function(xhr) {
        xhr.setRequestHeader("Authorization", "APPCODE .....................");
    }
});

使用ajax的beforeSend方法向頭部添加信息

2、fetch

let requestUrl = "http://ali-qqmusic.showapi.com/top?topid=6";
fetch(requestUrl, {
    method: "get",
    headers: {
        Authorization: "APPCODE ......................"
    }
}).then(response => response.json()).then(data => console.log(data)).catch(e => console.log(e));

哈哈哈哈，其實有點寵fetch，這個時用ES6來寫。接下來來整理下相關API，以及簡單介紹下fetch

二、記錄jQuery ajax 時不時使用，但是快遺忘的API方法

ajax 常用的方法，什麼url、type、dataType、success之類的就不提了

1、async　　預設是true表示請求為非同步請求，如果設置為false表示同步，ajax下麵的方法要等請求結束後才會調用

2、beforeSend(xhr)　　　用於發送請求前修改XMLHttpRequest對象的函數，主要用作修改http頭部，就像上面的demo

3、context　　　用於綁定回調函數的上下文，即this，設置了它就相當於在回調函數上加入了bind(context)一樣

4、jsonp　　　　用於跨域操作，重寫回調函數的名字

5、timeout 　　　請求超時時間

6、complete(xhr , ts)　　　　無論請求成功or失敗的回調函數

三、fetch

之前一直沒用用過這種請求方式，現在看來這種請求方式代碼顯得十分的優美，畢竟Fetch API是基於Promises設計的。fetch是瀏覽器提供的原生網路請求介面，但是它的相容性還是有所欠缺的，具體相容情況如下圖

常用的寫法有兩種

//方式一
fetch('./api/XXX.json')
.then(
    function(response) {
        if(response.status !== 200) {
            console.log('Status Code: ' + response.status);
            return;
        }
        response.json().then(function(data) {
            console.log(data);
        });
    }
)
.catch(function(err) {
    console.log(err);
});
//方式二
function status(response) {  
  if (response.status == 200) {  
    return Promise.resolve(response)  
  } else {  
    return Promise.reject(new Error(response.statusText))  
  }  
}
function json(response) {  
  return response.json()  
}
fetch('./api/XXX.json').then(status).then(json)  
.then(function(data) {  
    console.log(data);
}).catch(function(err) {  
    console.log('err);  
});

　　在fetch方法中，首先返回的response對象，so 第一個then中的函數參數為res，然後通過響應的狀態碼判斷請求是否成功，成功後調用response的json()方法，這個也是返回一個Promise對象，所以可以連續then，最後的catch可以抓取代碼執行時的異常信息。 

　　然後就是fetch第一個參數為URL，第二個參數可以加入請求方式、頭信息、表單信息等

fetch(url, {  
    method: 'post',  
    headers: {  
      "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"  
    },  
    body: 'foo=bar&lorem=ipsum'  
})

　　最後就是fetch中的一些坑，沒遇到過，先記錄下。

　1、Fetch 請求預設是不帶 cookie 的，需要設置 fetch(url, {credentials: 'include'})

　2、伺服器返回 400，500 錯誤碼時並不會 reject，只有網路錯誤這些導致請求不能完成時，fetch 才會被 reject。

搞定！！！