fetch
- Fetch API是新的ajax解決方案 Fetch會(huì)返回Promise
-
fetch不是ajax的進(jìn)一步封裝，而是原生js勃痴，沒有使用XMLHttpRequest對(duì)象谒所。
- fetch(url, options).then(）
<script type="text/javascript">
/*
Fetch API 基本用法
fetch(url).then()
第一個(gè)參數(shù)請(qǐng)求的路徑 Fetch會(huì)返回Promise 所以我們可以使用then 拿到請(qǐng)求成功的結(jié)果
*/
fetch('http://localhost:3000/fdata').then(function(data){
// text()方法屬于fetchAPI的一部分，它返回一個(gè)Promise實(shí)例對(duì)象沛申，用于獲取后臺(tái)返回的數(shù)據(jù)
return data.text();
}).then(function(data){
// 在這個(gè)then里面我們能拿到最終的數(shù)據(jù)
console.log(data);
})
</script>
fetch API 中的 HTTP 請(qǐng)求
- fetch(url, options).then(）
- HTTP協(xié)議劣领，它給我們提供了很多的方法，如POST铁材，GET尖淘，DELETE，UPDATE著觉，PATCH和PUT
- 默認(rèn)的是 GET 請(qǐng)求
- 需要在 options 對(duì)象中 指定對(duì)應(yīng)的 method method:請(qǐng)求使用的方法
- post 和 普通 請(qǐng)求的時(shí)候 需要在options 中 設(shè)置 請(qǐng)求頭 headers 和 body
<script type="text/javascript">
/*
Fetch API 調(diào)用接口傳遞參數(shù)
*/
#1.1 GET參數(shù)傳遞 - 傳統(tǒng)URL 通過(guò)url 村生？ 的形式傳參
fetch('http://localhost:3000/books?id=123', {
# get 請(qǐng)求可以省略不寫 默認(rèn)的是GET
method: 'get'
})
.then(function(data) {
# 它返回一個(gè)Promise實(shí)例對(duì)象，用于獲取后臺(tái)返回的數(shù)據(jù)
return data.text();
}).then(function(data) {
# 在這個(gè)then里面我們能拿到最終的數(shù)據(jù)
console.log(data)
});
#1.2 GET參數(shù)傳遞 restful形式的URL 通過(guò)/ 的形式傳遞參數(shù) 即 id = 456 和id后臺(tái)的配置有關(guān)
fetch('http://localhost:3000/books/456', {
# get 請(qǐng)求可以省略不寫 默認(rèn)的是GET
method: 'get'
})
.then(function(data) {
return data.text();
}).then(function(data) {
console.log(data)
});
#2.1 DELETE請(qǐng)求方式參數(shù)傳遞 刪除id 是 id=789
fetch('http://localhost:3000/books/789', {
method: 'delete'
})
.then(function(data) {
return data.text();
}).then(function(data) {
console.log(data)
});
#3 POST請(qǐng)求傳參
fetch('http://localhost:3000/books', {
method: 'post',
# 3.1 傳遞數(shù)據(jù)
body: 'uname=lisi&pwd=123',
# 3.2 設(shè)置請(qǐng)求頭
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
.then(function(data) {
return data.text();
}).then(function(data) {
console.log(data)
});
# POST請(qǐng)求傳參
fetch('http://localhost:3000/books', {
method: 'post',
body: JSON.stringify({
uname: '張三',
pwd: '456'
}),
headers: {
'Content-Type': 'application/json'
}
})
.then(function(data) {
return data.text();
}).then(function(data) {
console.log(data)
});
# PUT請(qǐng)求傳參 修改id 是 123 的
fetch('http://localhost:3000/books/123', {
method: 'put',
body: JSON.stringify({
uname: '張三',
pwd: '789'
}),
headers: {
'Content-Type': 'application/json'
}
})
.then(function(data) {
return data.text();
}).then(function(data) {
console.log(data)
});
</script>
fetchAPI 中 響應(yīng)格式
- 用fetch來(lái)獲取數(shù)據(jù)饼丘，如果響應(yīng)正常返回趁桃，我們首先看到的是一個(gè)response對(duì)象，其中包括返回的一堆原始字節(jié)肄鸽，這些字節(jié)需要在收到后卫病，需要我們通過(guò)調(diào)用方法將其轉(zhuǎn)換為相應(yīng)格式的數(shù)據(jù)，比如
JSON典徘，BLOB或者TEXT等等
/*
Fetch響應(yīng)結(jié)果的數(shù)據(jù)格式
*/
fetch('http://localhost:3000/json').then(function(data){
// return data.json(); // 將獲取到的數(shù)據(jù)使用 json 轉(zhuǎn)換對(duì)象
return data.text(); // // 將獲取到的數(shù)據(jù) 轉(zhuǎn)換成字符串
}).then(function(data){
// console.log(data.uname)
// console.log(typeof data)
var obj = JSON.parse(data);
console.log(obj.uname,obj.age,obj.gender)
})
