ES6的Fetch異步請求的實現(xiàn)方法
在前端的快速發(fā)展中,為了契合更好的設(shè)計模式,產(chǎn)生了Fetch框架,F(xiàn)etch返回的信息比XMLHttpRequest更豐富。但它目前還不是一個標(biāo)準(zhǔn),它支持大部分常用的http 請求和響應(yīng)的標(biāo)準(zhǔn)。
一. 一個完整的post請求和響應(yīng)的過程
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("請求成功,響應(yīng)數(shù)據(jù)為:",text); }) .catch(function(err){ console.log("Fetch錯誤:"+err); });
(1)fetch的參數(shù)有兩個,第一個是url即請求的處理路徑;
第二個是初始化信息,包括以下幾種:
- method:請求方法,常用的有g(shù)et和post;
- headers:請求頭信息,最常用的就是表單格式的數(shù)據(jù):”Content-type”:”application/x-www-form-urlencoded”;
- mode:控制是否允許跨域。same-origin(同源請求)、no-cors(默認(rèn))和cros(允許跨域請求);
- cache:關(guān)于緩存的一些設(shè)置;
- body:要發(fā)送到后臺的參數(shù),可以為ArrayBuffer,String,F(xiàn)ormData等類型;
(2)從上面的代碼我們可以知道fetch()方法返回的是一個promise對象;
(3)響應(yīng)信息為傳入then方法成功時的參數(shù),相應(yīng)包含很多http的響應(yīng)信息,如下:
(4)可以判斷響應(yīng)的狀態(tài)嗎,返回請求成功的對應(yīng)信息;
(5)通過狀態(tài)轉(zhuǎn)換,轉(zhuǎn)換為指定的格式,如果是文本信息,直接text()方法就可以;若為json格式,則json()就可以轉(zhuǎn)換為json格式信息,其實也就是自己請求數(shù)據(jù)格式時所設(shè)置的格式;
二. 后臺處理代碼:
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 alt="" src="http://img.jbzj.com/file_images/article/201812/2018120711295315.png" />
三. 和ajax 的對比
(1)上面的Fetch代碼很像jQuery中的ajax,但是兩者是不同的,fetch是原生的js,而jQuery中的ajax是庫封裝的;
(2)ajax只能實現(xiàn)同源請求,fetch可實現(xiàn)跨域請求;
(3)ajax幾乎所有的主流瀏覽器都支持,但fetch由于目前并沒有被列入標(biāo)準(zhǔn),只有像firefox最新版,chrome最新版,以及IE10+等以上才支持,如下圖片所示;
注意:在body中向后臺傳遞參數(shù)時,只有寫成“key=value&key=value”的形式才會成功,其它方法后臺接收到均為null,封裝為FormData格式也不成功。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript+xml實現(xiàn)簡單圖片輪換(只支持IE)
看著許多網(wǎng)站都有廣告自動輪換;自己試著寫了一個圖片輪換,代碼和功能都很簡單,只支持IE的,FF的還要加些東東,需要了解的朋友可以參考下2012-12-12關(guān)于base64編碼和解碼的js工具函數(shù)
這篇文章主要介紹了關(guān)于base64編碼和解碼的js工具函數(shù),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-02-02