fetch是一種HTTP數(shù)據(jù)請(qǐng)求的方式踩官，是XMLHttpRequest的一種替代方案逞度。fetch不是ajax的進(jìn)一步封裝，而是原生js。Fetch函數(shù)就是原生js碑定，沒(méi)有使用XMLHttpRequest對(duì)象天通。
ajax
- 使用步驟
1.創(chuàng)建XmlHttpRequest對(duì)象
2.調(diào)用open方法設(shè)置基本請(qǐng)求信息
3.設(shè)置發(fā)送的數(shù)據(jù)娃肿，發(fā)送請(qǐng)求
4.注冊(cè)監(jiān)聽(tīng)的回調(diào)函數(shù)
5.拿到返回值疾嗅，對(duì)頁(yè)面進(jìn)行更新
//1.創(chuàng)建Ajax對(duì)象
if(window.XMLHttpRequest){
var oAjax=new XMLHttpRequest();
}else{
var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.連接服務(wù)器（打開(kāi)和服務(wù)器的連接）
oAjax.open('GET', url, true);
//3.發(fā)送
oAjax.send();
//4.接收
oAjax.onreadystatechange=function (){
if(oAjax.readyState==4){
if(oAjax.status==200){
//alert('成功了：'+oAjax.responseText);
fnSucc(oAjax.responseText);
}else{
//alert('失敗了');
if(fnFaild){
fnFaild();
}
}
}
};
fetch
- 特點(diǎn)
1、第一個(gè)參數(shù)是URL:
2谴蔑、第二個(gè)是可選參數(shù)豌骏，可以控制不同配置的 init 對(duì)象
3、使用了 JavaScript Promises 來(lái)處理結(jié)果/回調(diào):
fetch(url).then(response => response.json())
.then(data => console.log(data))
.catch(e => console.log("Oops, error", e))
- 更酷的一點(diǎn)
你可以通過(guò)Request構(gòu)造器函數(shù)創(chuàng)建一個(gè)新的請(qǐng)求對(duì)象隐锭，你還可以基于原有的對(duì)象創(chuàng)建一個(gè)新的對(duì)象窃躲。 新的請(qǐng)求和舊的并沒(méi)有什么不同，但你可以通過(guò)稍微調(diào)整配置對(duì)象钦睡，將其用于不同的場(chǎng)景蒂窒。例如：
var req = new Request(URL, {method: 'GET', cache: 'reload'});
fetch(req).then(function(response) {
return response.json();
}).then(function(json) {
insertPhotos(json);
});
上面的代碼中我們指明了請(qǐng)求使用的方法為GET，并且指定不緩存響應(yīng)的結(jié)果荞怒，你可以基于原有的GET請(qǐng)求創(chuàng)建一個(gè)POST請(qǐng)求洒琢，它們具有相同的請(qǐng)求源。代碼如下：
// 基于req對(duì)象創(chuàng)建新的postReq對(duì)象
var postReq = new Request(req, {method: 'POST'});
fetch和ajax 的主要區(qū)別
1褐桌、fetch()返回的promise將不會(huì)拒絕http的錯(cuò)誤狀態(tài)纬凤，即使響應(yīng)是一個(gè)HTTP 404或者500
2、在默認(rèn)情況下 fetch不會(huì)接受或者發(fā)送cookies
fetch的配置
Promise fetch(String url [, Object options]);
Promise fetch(Request req [, Object options]);
更多配置
fetch封裝
export default async(url = '', data = {}, type = 'GET', method = 'fetch') => {
type = type.toUpperCase();
url = baseUrl + url;
if (type == 'GET') {
let dataStr = ''; //數(shù)據(jù)拼接字符串
Object.keys(data).forEach(key => {
dataStr += key + '=' + data[key] + '&';
})
if (dataStr !== '') {
dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'));
url = url + '?' + dataStr;
}
}
if (window.fetch && method == 'fetch') {
let requestConfig = {
credentials: 'include',//為了在當(dāng)前域名內(nèi)自動(dòng)發(fā)送 cookie 撩嚼， 必須提供這個(gè)選項(xiàng)
method: type,
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
mode: "cors",//請(qǐng)求的模式
cache: "force-cache"
}
if (type == 'POST') {
Object.defineProperty(requestConfig, 'body', {
value: JSON.stringify(data)
})
}
try {
const response = await fetch(url, requestConfig);
const responseJson = await response.json();
return responseJson
} catch (error) {
throw new Error(error)
}
} else {
return new Promise((resolve, reject) => {
let requestObj;
if (window.XMLHttpRequest) {
requestObj = new XMLHttpRequest();
} else {
requestObj = new ActiveXObject;
}
let sendData = '';
if (type == 'POST') {
sendData = JSON.stringify(data);
}
requestObj.open(type, url, true);
requestObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
requestObj.send(sendData);
requestObj.onreadystatechange = () => {
if (requestObj.readyState == 4) {
if (requestObj.status == 200) {
let obj = requestObj.response
if (typeof obj !== 'object') {
obj = JSON.parse(obj);
}
resolve(obj)
} else {
reject(requestObj)
}
}
}
})
}
}
