fetchjs的全面解析

一、fetchJSON_comment98

fetchjs是一個封裝了fetch API的JavaScript庫，其目的是簡化fetch API的使用。fetchjs可以解決個別瀏覽器對fetch API的不兼容性問題並實現了一些實用方法，支持JSONP、表單提交、文件上傳、流下載等多種功能。fetchjs也可以使用查詢參數來指定響應數據的格式，避免了手動解析響應數據的麻煩。

fetchJSON_comment98是fetchjs中一個常用方法。該方法通過jsonp請求獲取響應數據。使用fetchjs的fetchJSON_comment98方法請求數據時，只需要提供一個url和回調函數即可。下面是fetchJSON_comment98的具體使用方式：

fetch.fetchJSON_comment98(url, function (response) {
  console.log(response);
});

fetchJSON_comment98方法接受兩個參數。第一個參數為API的url，該url需要跨域，第二個參數為回調函數，用於處理服務器返回的數據。在回調函數中，可以進行數據的處理和展示，比如上述代碼中的console.log就是將響應數據輸出到控制台。

二、fetch用法

fetchjs的使用和fetch API的使用非常類似。fetch方法接受一個URL參數，並返回一個Promise對象。該Promise會在響應時resolve。對於請求的 HTTP 錯誤狀態，即使 HTTP 200 也是在允許範圍之外的。此時fetch也會resolve promise，只是在 response 對象上標記一個 ok 屬性為 false。

fetch 還支持另外一個參數，init，用來自定義請求。從fetch開發者工具看，你可以發現，實際發起的請求中大量使用了一種新的header：fetch請求頭。比如，可以通過以下方式設置請求頭：

fetch('/example', {
  headers: {
    'header1': 'value1',
    'header2': 'value2'
  }
})

fetch 還支持ES6的Promise，這讓異步網絡操作更加容易處理:

fetch('/todos')
  .then(response => response.json())
  .then(data => console.log(data));

fetch也支持post請求，將HTTP方法設置為POST：

fetch(url, {
  method: 'POST',
  body: JSON.stringify(data),
  headers:{
    'Content-Type': 'application/json'
  }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

三、fetchJSON_comment98 採集標籤

fetchJSON_comment98 採集標籤是fetchjs中一個非常實用的方法。該方法可以模擬form表單提交，向服務器發送數據。下面是fetchJSON_comment98 採集標籤的具體使用方式：

fetch.postForm(url, {
  username: '123',
  password: '456'
}).then(function (response) {
  console.log(response)
}).catch(function (error) {
  console.log(error)
})

fetchJSON_comment98 採集標籤方法接受兩個參數。第一個參數是目標URL，第二個參數是包含要提交的表單數據的JavaScript對象。在使用fetch.postForm方法時，fetch會將表單數據轉換成請求體並發送到目標URL，然後回調返回服務器響應的數據。

四、js fetch的用法

fetchjs庫不僅API簡單，語法清晰舒適，而且是一個功能強大的Ajax工具。接下來我們來一起看一下js fetch的用法。

let url = 'http://www.example.com';
let data = {
    'name': 'fetch1',
    'age': 21
};
fetch(url+'?data='+JSON.stringify(data),{
    method : 'get',
}).then(function(res){
    console.log(res);
})

對於跨域訪問，fetch默認是不會帶cookie的。需要添加fetch的credentials屬性，如下：

fetch(url,{
    method : 'get',
    credentials: 'include',//帶cookie
}).then(function(res){
    console.log(res);
})

fetch.js也可以方便完成POST、JSONP等其他操作。

//post
fetch(url, {
    method : 'post',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
    },
    body : 'a=1&b=2'
}).then(function(res){
    console.log(res);
});

//jsonp
fetch.jsonp(url,{
    callback:'handleResponse',//指定回調函數名
}).then(function(res){
    console.log(res);
});

五、fetch文件上傳

fetchjs也支持文件上傳功能。下面是fetch文件上傳的代碼示例：

let file = document.getElementById('file').files[0];
let formData = new FormData();
formData.append('file', file);
fetch('/upload', {
    method: 'POST',
    body: formData
}).then(response => {
    console.log(response);
});

在上傳文件時，需要創建一個FormData對象並將文件添加到FormData中。然後將其作為Body傳遞到請求中。這樣就可以上傳文件了。

六、fetch支持多種返回格式

fetchjs支持多種返回格式：JSON、XML、Text等。在默認情況下，fetchjs會自動解析JSON。

fetch(url)
  .then(res => res.json())
  .then(data => {
    console.log(data);
  });

如果服務器返回的不是JSON格式，可以使用其他的解析方法：

fetch(url)
  .then(res => res.text())
  .then(data => {
    console.log(data);
  });

fetchjs也支持XML格式：

fetch(url)
  .then(res => res.xml())
  .then(data => {
    console.log(data);
  });

fetchjs的多種返回格式為開發者提供了更多的選擇和靈活性。