在前端的快速發(fā)展中，為了契合更好的設(shè)計(jì)模式，產(chǎn)生了Fetch框架，F(xiàn)etch返回的信息比XMLHttpRequest更豐富。但它目前還不是一個(gè)標(biāo)準(zhǔn)，它支持大部分常用的http 請(qǐng)求和響應(yīng)的標(biāo)準(zhǔn)。

一. 一個(gè)完整的post請(qǐng)求和響應(yīng)的過(guò)程

  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("請(qǐng)求成功，響應(yīng)數(shù)據(jù)為:",text);      })      .catch(function(err){        console.log("Fetch錯(cuò)誤:"+err);      });

（1）fetch的參數(shù)有兩個(gè)，第一個(gè)是url即請(qǐng)求的處理路徑；

第二個(gè)是初始化信息，包括以下幾種：

• method：請(qǐng)求方法，常用的有g(shù)et和post；
• headers：請(qǐng)求頭信息，最常用的就是表單格式的數(shù)據(jù)：”Content-type”:”application/x-www-form-urlencoded”；
• mode：控制是否允許跨域。same-origin（同源請(qǐng)求）、no-cors（默認(rèn)）和cros（允許跨域請(qǐng)求）；
• cache：關(guān)于緩存的一些設(shè)置；
• body：要發(fā)送到后臺(tái)的參數(shù)，可以為ArrayBuffer，String，F(xiàn)ormData等類(lèi)型；

（2）從上面的代碼我們可以知道fetch()方法返回的是一個(gè)promise對(duì)象；

（3）響應(yīng)信息為傳入then方法成功時(shí)的參數(shù)，相應(yīng)包含很多http的響應(yīng)信息，如下：

（4）可以判斷響應(yīng)的狀態(tài)嗎，返回請(qǐng)求成功的對(duì)應(yīng)信息；

（5）通過(guò)狀態(tài)轉(zhuǎn)換，轉(zhuǎn)換為指定的格式，如果是文本信息，直接text()方法就可以；若為json格式，則json()就可以轉(zhuǎn)換為json格式信息，其實(shí)也就是自己請(qǐng)求數(shù)據(jù)格式時(shí)所設(shè)置的格式；

二. 后臺(tái)處理代碼：

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);  }}

后臺(tái)成功輸出：

瀏覽器控制臺(tái)成功打印：

三. 和ajax 的對(duì)比

（1）上面的Fetch代碼很像jQuery中的ajax，但是兩者是不同的，fetch是原生的js，而jQuery中的ajax是庫(kù)封裝的；

（2）ajax只能實(shí)現(xiàn)同源請(qǐng)求，fetch可實(shí)現(xiàn)跨域請(qǐng)求；

（3）ajax幾乎所有的主流瀏覽器都支持，但fetch由于目前并沒(méi)有被列入標(biāo)準(zhǔn)，只有像firefox最新版，chrome最新版，以及IE10+等以上才支持，如下圖片所示；

注意：在body中向后臺(tái)傳遞參數(shù)時(shí)，只有寫(xiě)成“key=value&key=value”的形式才會(huì)成功，其它方法后臺(tái)接收到均為null，封裝為FormData格式也不成功。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。