在前端的快速發展中，為了契合更好的設計模式，產生了Fetch框架，Fetch返回的信息比XMLHttpRequest更豐富。但它目前還不是一個標準，它支持大部分常用的http 請求和響應的標準。
一. 一個完整的post請求和響應的過程
var url = "/fetch";
fetch(url,{
method:"post",
headers:{
"Content-type":"application/x-www-form-urlencoded"
},
body:"name=luwenjing&age=22"
})
.then(function (response){
if (response.status == 200){
return response;
}
})
.then(function (data) {
return data.text();
})
.then(function(text){
console.log("請求成功，響應數據為:",text);
})
.catch(function(err){
console.log("Fetch錯誤:"+err);
});
（1）fetch的參數有兩個，第一個是url即請求的處理路徑；
第二個是初始化信息，包括以下幾種：
（2）從上面的代碼我們可以知道fetch()方法返回的是一個promise對象；
（3）響應信息為傳入then方法成功時的參數，相應包含很多http的響應信息，如下：
（4）可以判斷響應的狀態嗎，返回請求成功的對應信息；
（5）通過狀態轉換，轉換為指定的格式，如果是文本信息，直接text()方法就可以；若為json格式，則json()就可以轉換為json格式信息，其實也就是自己請求數據格式時所設置的格式；
二. 后臺處理代碼：
import java.io.IOException;
import java.io.Writer;
/**
* Created by LuWenjing on 2017/4/5.
*/
public class fetchServlet extends javax.servlet.http.HttpServlet {
protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
String name = request.getParameter("name");
String age = request.getParameter("age");
System.out.println(name + ": " + age);
Writer out = response.getWriter();
out.write("hello world!");
}
protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
doPost(request, response);
}
}
后臺成功輸出：
瀏覽器控制臺成功打?。?img src="https://cache.yisu.com/upload/information/20200622/114/31391.png" alt="ES6的Fetch異步請求的實現方法">
三. 和ajax 的對比
（1）上面的Fetch代碼很像jQuery中的ajax，但是兩者是不同的，fetch是原生的js，而jQuery中的ajax是庫封裝的；
（2）ajax只能實現同源請求，fetch可實現跨域請求；
（3）ajax幾乎所有的主流瀏覽器都支持，但fetch由于目前并沒有被列入標準，只有像firefox最新版，chrome最新版，以及IE10+等以上才支持，如下圖片所示；
注意：在body中向后臺傳遞參數時，只有寫成“key=value&key=value”的形式才會成功，其它方法后臺接收到均為null，封裝為FormData格式也不成功。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
