首先认清一个辈分:
- xhr
- jquery
- axios
- fetch
fetch 和 xhr 的同一个辈分的!!!且window内置了fetch,不用安装任何插件即可使用!且fetch本身就是promise风格的!
1、特点
- fetch: 原生函数,不再使用XmlHttpRequest对象提交ajax请求
- 老版本浏览器可能不支持
2、相关API
2.1、Get
fetch(url).then(function(response) {
return response.json()
}).then(function(data) {
console.log(data)
}).catch(function(e) {
console.log(e)
});
2.2、Post
fetch(url, {
method: "POST",
body: JSON.stringify(data),
}).then(function(data) {
console.log(data)
}).catch(function(e) {
console.log(e)
})
3、Demo
与 三、【React脚手架】React Ajax(axios) 的 axios 做对比,代码如下:
// axios
axios.post('http://localhost:8003/tBannerHtml/selectBanner').then(
response => {
console.log(`请求成功,返回参数:`, response.data)
},
error => {
console.log(`请求失败,失败原因:`, error)
}
)
// fetch(常规)
fetch('http://localhost:8003/tBannerHtml/selectBanner').then(
response => {
console.log(`联系服务器成功了`)
return response.json()
},
error => {
console.log(`联系服务器成功了,失败原因:`, error)
return new Promise(()=>{})
}
).then(
response => {
console.log(`获取数据成功了:`, response)
},
error => {
console.log(`获取数据失败了:`, error)
}
)
// fetch(优化)
fetch('http://localhost:8003/tBannerHtml/selectBanner').then(
response => {
console.log(`联系服务器成功了`)
return response.json()
}
).then(
response => {
console.log(`获取数据成功了:`, response)
}
).catch( // 统一处理错误
error => {
console.log('请求出错:', error)
}
)
// fetch(再优化)
try {
const response = await fetch('http://localhost:8003/tBannerHtml/selectBanner')
const data = await response.json()
console.log(`获取数据成功了:`, data )
} catch ( error ) {
console.log('请求出错:', error)
}
参阅文档: