一蒂培、ajax
傳統(tǒng) Ajax 指的是 XMLHttpRequest（XHR），核心使用XMLHttpRequest對象榜苫，允許客戶端腳本發(fā)送HTTP請求护戳，去請求服務(wù)器的數(shù)據(jù)來創(chuàng)建動態(tài)網(wǎng)頁，可以在不重新加載整個網(wǎng)頁的情況下垂睬，對網(wǎng)頁的某部分進(jìn)行更新媳荒。也稱局部刷新（常見的例子：分頁、用戶名即時驗證驹饺、聊天）钳枕；多個請求之間如果有先后關(guān)系的話，就會出現(xiàn)回調(diào)地獄赏壹。
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
readyState：
0: 請求未初始化
1: 服務(wù)器連接已建立
2: 請求已接收
3: 請求處理中
4: 請求已完成鱼炒，且響應(yīng)已就緒
GET 還是 POST？
與 POST 相比蝌借，GET 更簡單也更快昔瞧，并且在大部分情況下都能用。
然而菩佑，在以下情況中自晰，請使用 POST 請求：
- 無法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫）
- 向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒有數(shù)據(jù)量限制）
- 發(fā)送包含未知字符的用戶輸入時，POST 比 GET 更穩(wěn)定也更可靠
一個簡單 POST 請求：
xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();
如果需要像 HTML 表單那樣 POST 數(shù)據(jù)擎鸠，請使用 setRequestHeader() 來添加 HTTP 頭缀磕。然后在 send() 方法中規(guī)定您希望發(fā)送的數(shù)據(jù)：
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
jquery封裝ajax
$.ajax({
type: 'POST',
url: url,
data: data,
dataType: dataType,
success: function () {},
error: function () {}
});
Ajax是對原生XHR的封裝，為了達(dá)到我們跨越的目的劣光，增添了對JSONP的支持袜蚕。經(jīng)過這么多年的更新維護(hù)，不得不承認(rèn)它已經(jīng)很成熟绢涡，能夠滿足我們的基本需求牲剃，但是隨著react,vue新一代框架的興起，以及ES規(guī)范的完善雄可，更多API的更新凿傅，它逐漸暴露了自己的不足：
- 針對MVC的編程設(shè)計,不符合現(xiàn)在前端MVVM的趨勢
- 基于原生的XHR開發(fā)缠犀，XHR本身的架構(gòu)不夠清晰
- JQuery較大，單純使用ajax卻要引入整個JQuery非常的不合理
- 配置和調(diào)用方式非炒鲜妫混亂辨液，而且基于事件的異步模型不友好。
二箱残、axios
Axios 是一個基于 promise 的 HTTP 庫滔迈，可以用在瀏覽器和 node.js 中。
特性：
- 從瀏覽器中創(chuàng)建 XMLHttpRequests
- 從 node.js 創(chuàng)建 http 請求
- 支持 Promise API
- 攔截請求和響應(yīng)
- 轉(zhuǎn)換請求數(shù)據(jù)和響應(yīng)數(shù)據(jù)
- 取消請求
- 自動轉(zhuǎn)換 JSON 數(shù)據(jù)
- 客戶端支持防御 XSRF
PS:防止CSRF:就是讓你的每個請求都帶一個從cookie中拿到的key, 根據(jù)瀏覽器同源策略被辑，假冒的網(wǎng)站是拿不到你cookie中得key的燎悍，這樣，后臺就可以輕松辨別出這個請求是否是用戶在假冒網(wǎng)站上的誤導(dǎo)輸入盼理，從而采取正確的策略谈山。
1. axios.create([config])
const Axios = axios.create({
// baseURL: HOST, // 前綴
responseType: 'json', // 數(shù)據(jù)格式
withCredentials: true, // 是否允許帶cookie這些
headers: {
'Content-Type': 'application/json;charset=UTF-8' // json格式數(shù)據(jù)
}
})
以下是可用的實例方法。指定的配置將與實例的配置合并宏怔。
- axios.request(config)
- axios.get(url[, config])
- axios.delete(url[, config])
- axios.head(url[, config])
- axios.options(url[, config])
- axios.post(url[, data[, config]])
- axios.put(url[, data[, config]])
- axios.patch(url[, data[, config]])
2. 請求配置
這些是創(chuàng)建請求時可以用的配置選項奏路。只有 url 是必需的。如果沒有指定 method举哟，請求將默認(rèn)使用 get 方法思劳。
{
// `url` 是用于請求的服務(wù)器 URL
url: '/user',
// `method` 是創(chuàng)建請求時使用的方法
method: 'get', // default
// `baseURL` 將自動加在 `url` 前面，除非 `url` 是一個絕對 URL妨猩。
// 它可以通過設(shè)置一個 `baseURL` 便于為 axios 實例的方法傳遞相對 URL
baseURL: 'https://some-domain.com/api/',
// `transformRequest` 允許在向服務(wù)器發(fā)送前潜叛，修改請求數(shù)據(jù)
// 只能用在 'PUT', 'POST' 和 'PATCH' 這幾個請求方法
// 后面數(shù)組中的函數(shù)必須返回一個字符串，或 ArrayBuffer壶硅，或 Stream
transformRequest: [function (data, headers) {
// 對 data 進(jìn)行任意轉(zhuǎn)換處理
return data;
}],
// `transformResponse` 在傳遞給 then/catch 前威兜，允許修改響應(yīng)數(shù)據(jù)
transformResponse: [function (data) {
// 對 data 進(jìn)行任意轉(zhuǎn)換處理
return data;
}],
// `headers` 是即將被發(fā)送的自定義請求頭
headers: {'X-Requested-With': 'XMLHttpRequest'},
// `params` 是即將與請求一起發(fā)送的 URL 參數(shù)
// 必須是一個無格式對象(plain object)或 URLSearchParams 對象
params: {
ID: 12345
},
// `paramsSerializer` 是一個負(fù)責(zé) `params` 序列化的函數(shù)
// (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
paramsSerializer: function(params) {
return Qs.stringify(params, {arrayFormat: 'brackets'})
},
// `data` 是作為請求主體被發(fā)送的數(shù)據(jù)
// 只適用于這些請求方法 'PUT', 'POST', 和 'PATCH'
// 在沒有設(shè)置 `transformRequest` 時，必須是以下類型之一：
// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
// - 瀏覽器專屬：FormData, File, Blob
// - Node 專屬： Stream
data: {
firstName: 'Fred'
},
// `timeout` 指定請求超時的毫秒數(shù)(0 表示無超時時間)
// 如果請求話費了超過 `timeout` 的時間庐椒，請求將被中斷
timeout: 1000,
// `withCredentials` 表示跨域請求時是否需要使用憑證
withCredentials: false, // default
// `adapter` 允許自定義處理請求椒舵，以使測試更輕松
// 返回一個 promise 并應(yīng)用一個有效的響應(yīng) (查閱 [response docs](#response-api)).
adapter: function (config) {
/* ... */
},
// `auth` 表示應(yīng)該使用 HTTP 基礎(chǔ)驗證，并提供憑據(jù)
// 這將設(shè)置一個 `Authorization` 頭约谈，覆寫掉現(xiàn)有的任意使用 `headers` 設(shè)置的自定義 `Authorization`頭
auth: {
username: 'janedoe',
password: 's00pers3cret'
},
// `responseType` 表示服務(wù)器響應(yīng)的數(shù)據(jù)類型笔宿，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
responseType: 'json', // default
// `responseEncoding` indicates encoding to use for decoding responses
// Note: Ignored for `responseType` of 'stream' or client-side requests
responseEncoding: 'utf8', // default
// `xsrfCookieName` 是用作 xsrf token 的值的cookie的名稱
xsrfCookieName: 'XSRF-TOKEN', // default
// `xsrfHeaderName` is the name of the http header that carries the xsrf token value
xsrfHeaderName: 'X-XSRF-TOKEN', // default
// `onUploadProgress` 允許為上傳處理進(jìn)度事件
onUploadProgress: function (progressEvent) {
// Do whatever you want with the native progress event
},
// `onDownloadProgress` 允許為下載處理進(jìn)度事件
onDownloadProgress: function (progressEvent) {
// 對原生進(jìn)度事件的處理
},
// `maxContentLength` 定義允許的響應(yīng)內(nèi)容的最大尺寸
maxContentLength: 2000,
// `validateStatus` 定義對于給定的HTTP 響應(yīng)狀態(tài)碼是 resolve 或 reject promise 。如果 `validateStatus` 返回 `true` (或者設(shè)置為 `null` 或 `undefined`)棱诱，promise 將被 resolve; 否則泼橘，promise 將被 rejecte
validateStatus: function (status) {
return status >= 200 && status < 300; // default
},
// `maxRedirects` 定義在 node.js 中 follow 的最大重定向數(shù)目
// 如果設(shè)置為0，將不會 follow 任何重定向
maxRedirects: 5, // default
// `socketPath` defines a UNIX Socket to be used in node.js.
// e.g. '/var/run/docker.sock' to send requests to the docker daemon.
// Only either `socketPath` or `proxy` can be specified.
// If both are specified, `socketPath` is used.
socketPath: null, // default
// `httpAgent` 和 `httpsAgent` 分別在 node.js 中用于定義在執(zhí)行 http 和 https 時使用的自定義代理迈勋。允許像這樣配置選項：
// `keepAlive` 默認(rèn)沒有啟用
httpAgent: new http.Agent({ keepAlive: true }),
httpsAgent: new https.Agent({ keepAlive: true }),
// 'proxy' 定義代理服務(wù)器的主機(jī)名稱和端口
// `auth` 表示 HTTP 基礎(chǔ)驗證應(yīng)當(dāng)用于連接代理炬灭，并提供憑據(jù)
// 這將會設(shè)置一個 `Proxy-Authorization` 頭，覆寫掉已有的通過使用 `header` 設(shè)置的自定義 `Proxy-Authorization` 頭靡菇。
proxy: {
host: '127.0.0.1',
port: 9000,
auth: {
username: 'mikeymike',
password: 'rapunz3l'
}
},
// `cancelToken` 指定用于取消請求的 cancel token
// （查看后面的 Cancellation 這節(jié)了解更多）
cancelToken: new CancelToken(function (cancel) {
})
}
3. 相應(yīng)結(jié)構(gòu)
請求的響應(yīng)包含以下信息
{
// `data` 由服務(wù)器提供的響應(yīng)
data: {},
// `status` 來自服務(wù)器響應(yīng)的 HTTP 狀態(tài)碼
status: 200,
// `statusText` 來自服務(wù)器響應(yīng)的 HTTP 狀態(tài)信息
statusText: 'OK',
// `headers` 服務(wù)器響應(yīng)的頭
headers: {},
// `config` 是為請求提供的配置信息
config: {},
// 'request'
// `request` is the request that generated this response
// It is the last ClientRequest instance in node.js (in redirects)
// and an XMLHttpRequest instance the browser
request: {}
}
4. 配置的優(yōu)先順序
配置會以一個優(yōu)先順序進(jìn)行合并重归。這個順序是：在 lib/defaults.js 找到的庫的默認(rèn)值米愿，然后是實例的 defaults 屬性，最后是請求的 config 參數(shù)鼻吮。后者將優(yōu)先于前者育苟。
5. 攔截器
在請求或響應(yīng)被 then 或 catch 處理前攔截它們。
// 添加請求攔截器
axios.interceptors.request.use(function (config) {
// 在發(fā)送請求之前做些什么
return config;
}, function (error) {
// 對請求錯誤做些什么
return Promise.reject(error);
});
// 添加響應(yīng)攔截器
axios.interceptors.response.use(function (response) {
// 對響應(yīng)數(shù)據(jù)做點什么
return response;
}, function (error) {
// 對響應(yīng)錯誤做點什么
return Promise.reject(error);
});
如果你想在稍后移除攔截器椎木，可以這樣：
const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);
可以為自定義 axios 實例添加攔截器
const instance = axios.create({/*...*/});
instance.interceptors.request.use(function () {/*...*/});
三宙搬、fetch
fetch號稱是AJAX的替代品，是在ES6出現(xiàn)的拓哺，使用了ES6中的promise對象。Fetch是基于promise設(shè)計的脖母。Fetch的代碼結(jié)構(gòu)比起ajax簡單多了士鸥，參數(shù)有點像jQuery ajax。但是谆级，一定記住fetch不是ajax的進(jìn)一步封裝烤礁，而是原生js，沒有使用XMLHttpRequest對象肥照。
fetch的優(yōu)點：
1.符合關(guān)注分離脚仔，沒有將輸入、輸出和用事件來跟蹤的狀態(tài)混雜在一個對象里
2.更好更方便的寫法
坦白說舆绎，上面的理由對我來說完全沒有什么說服力鲤脏，因為不管是Jquery還是Axios都已經(jīng)幫我們把xhr封裝的足夠好，使用起來也足夠方便吕朵，為什么我們還要花費大力氣去學(xué)習(xí)fetch猎醇？
我認(rèn)為fetch的優(yōu)勢主要優(yōu)勢就是：
- 語法簡潔，更加語義化
- 基于標(biāo)準(zhǔn) Promise 實現(xiàn)努溃，支持 async/await
- 同構(gòu)方便硫嘶，使用 isomorphic-fetch
- 更加底層，提供的API豐富（request, response）
- 脫離了XHR梧税，是ES規(guī)范里新的實現(xiàn)方式
最近在使用fetch的時候沦疾，也遇到了不少的問題：
fetch是一個低層次的API，你可以把它考慮成原生的XHR第队，所以使用起來并不是那么舒服哮塞，需要進(jìn)行封裝。
1）fetch只對網(wǎng)絡(luò)請求報錯斥铺，對400彻桃，500都當(dāng)做成功的請求，服務(wù)器返回 400晾蜘，500 錯誤碼時并不會 reject邻眷，只有網(wǎng)絡(luò)錯誤這些導(dǎo)致請求不能完成時眠屎，fetch 才會被 reject。
2）fetch默認(rèn)不會帶cookie肆饶，需要添加配置項： fetch(url, {credentials: 'include'})
3）fetch不支持abort改衩，不支持超時控制，使用setTimeout及Promise.reject的實現(xiàn)的超時控制并不能阻止請求過程繼續(xù)在后臺運行驯镊，造成了流量的浪費
4）fetch沒有辦法原生監(jiān)測請求的進(jìn)度葫督，而XHR可以
下面來看一下知識點
語法：Promise<Response> fetch(input[, init]);
參數(shù)：
-
input：定義要獲取的資源。這可能是：一個
USVString字符串板惑，包含要獲取資源的 URL橄镜。一些瀏覽器會接受blob:和data:作為 schemes.一個Request對象。 - init(可選)：一個配置項對象冯乘，包括所有對請求的設(shè)置洽胶。可選的參數(shù)有：
-
method: 請求使用的方法裆馒，如GET姊氓、POST。 -
headers: 請求的頭信息喷好，形式為Headers的對象或包含ByteString值的對象字面量翔横。 -
body: 請求的 body 信息：可能是一個Blob、BufferSource梗搅、FormData禾唁、URLSearchParams或者USVString對象。注意 GET 或 HEAD 方法的請求不能包含 body 信息些膨。 -
mode: 請求的模式蟀俊，如cors、no-cors 或者same-origin订雾。 -
credentials: 請求的 credentials肢预，如omit、same-origin或者include洼哎。為了在當(dāng)前域名內(nèi)自動發(fā)送 cookie 烫映， 必須提供這個選項， 從 Chrome 50 開始噩峦， 這個屬性也可以接受FederatedCredential實例或是一個PasswordCredential`實例锭沟。 -
cache: 請求的 cache 模式:default、no-store 识补、reload 族淮、no-cache 、force-cache或者only-if-cached 。 -
redirect: 可用的 redirect 模式:follow(自動重定向),error(如果產(chǎn)生重定向?qū)⒆詣咏K止并且拋出一個錯誤), 或者manual(手動處理重定向). 在Chrome中祝辣，Chrome 47之前的默認(rèn)值是 follow贴妻，從 Chrome 47開始是 manual。 -
referrer: 一個USVString可以是no-referrer蝙斜、client或一個 URL名惩。默認(rèn)是client。 -
referrerPolicy: 指定了HTTP頭部referer字段的值孕荠∶漯模可能為以下值之一：no-referrer、no-referrer-when-downgrade稚伍、origin弯予、origin-when-cross-origin、unsafe-url 个曙。 -
integrity: 包括請求的 subresource integrity熙涤。`
請注意，fetch 規(guī)范與 jQuery.ajax() 主要有三種方式的不同：
- 當(dāng)接收到一個代表錯誤的 HTTP 狀態(tài)碼時困檩，從
fetch()返回的 Promise 不會被標(biāo)記為 reject， 即使響應(yīng)的 HTTP 狀態(tài)碼是 404 或 500那槽。相反悼沿，它會將 Promise 狀態(tài)標(biāo)記為 resolve （但是會將 resolve 的返回值的ok屬性設(shè)置為 false ），僅當(dāng)網(wǎng)絡(luò)故障時或請求被阻止時骚灸，才會標(biāo)記為 reject糟趾。 -
fetch()不會接受跨域 cookies；你也不能使用fetch()建立起跨域會話甚牲。其他網(wǎng)站的Set-Cookie頭部字段將會被無視义郑。 -
fetch不會發(fā)送 cookies。除非你使用了credentials 的初始化選項丈钙。（自 2017 年 8 月 25 日以后非驮，默認(rèn)的 credentials 政策變更為same-origin。Firefox 也在 61.0b13 版本中進(jìn)行了修改）
一個基本的 fetch 請求設(shè)置起來很簡單雏赦〗袤希看看下面的代碼：
fetch('http://example.com/movies.json')
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson);
});
發(fā)送帶憑據(jù)的請求
為了讓瀏覽器發(fā)送包含憑據(jù)的請求（即使是跨域源），要將credentials: 'include'添加到傳遞給 fetch()方法的init對象星岗。
fetch('https://example.com', {
credentials: 'include'
})
如果你只想在請求URL與調(diào)用腳本位于同一起源處時發(fā)送憑據(jù)填大，請?zhí)砑?credentials: 'same-origin'。
要改為確保瀏覽器不在請求中包含憑據(jù)俏橘，請使用 credentials: 'omit'允华。
上傳 JSON 數(shù)據(jù)
使用 fetch() POST JSON數(shù)據(jù)
var url = 'https://example.com/profile';
var data = {username: 'example'};
fetch(url, {
method: 'POST', // or 'PUT'
body: JSON.stringify(data), // data can be `string` or {object}!
headers: new Headers({
'Content-Type': 'application/json'
})
}).then(res => res.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));
上傳文件
var formData = new FormData();
var fileField = document.querySelector("input[type='file']");
formData.append('username', 'abc123');
formData.append('avatar', fileField.files[0]);
fetch('https://example.com/profile/avatar', {
method: 'PUT',
body: formData
})
.then(response => response.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));
檢測請求是否成功
如果遇到網(wǎng)絡(luò)故障，fetch() 對象。雖然這個情況經(jīng)常是遇到了權(quán)限問題或類似問題——比如 404 不是一個網(wǎng)絡(luò)故障靴寂。想要精確的判斷 fetch() 是否成功磷蜀，需要包含 promise resolved 的情況，此時再判斷 Response.ok是不是為 true榨汤。類似以下代碼：
fetch('flowers.jpg').then(function(response) {
if(response.ok) {
return response.blob();
}
throw new Error('Network response was not ok.');
}).then(function(myBlob) {
var objectURL = URL.createObjectURL(myBlob);
myImage.src = objectURL;
}).catch(function(error) {
console.log('There has been a problem with your fetch operation: ', error.message);
});
Headers
使用 Headers 的接口蠕搜，你可以通過 Headers()構(gòu)造函數(shù)來創(chuàng)建一個你自己的 headers 對象。一個 headers 對象是一個簡單的多名值對：
var content = "Hello World";
var myHeaders = new Headers();
myHeaders.append("Content-Type", "text/plain");
myHeaders.append("Content-Length", content.length.toString());
myHeaders.append("X-Custom-Header", "ProcessThisImmediately");
也可以傳一個多維數(shù)組或者對象字面量：
myHeaders = new Headers({
"Content-Type": "text/plain",
"Content-Length": content.length.toString(),
"X-Custom-Header": "ProcessThisImmediately",
});
Response 對象
Response實例是在 fetch() 處理完 promise 之后返回的收壕。
你會用到的最常見的 response 屬性有:
-
Response.status— 整數(shù)（默認(rèn)值為200）為response的狀態(tài)碼妓灌。 -
Response.statusText— 字符串（默認(rèn)值為"OK"），該值與 HTTP 狀態(tài)碼消息對應(yīng)蜜宪。 -
Response.ok— 如上所示虫埂，該屬性是來檢查response的狀態(tài)是否在 200 - 299（包括200 和 299）這個范圍內(nèi)。該屬性返回一個布爾值圃验。
