四、【React脚手架】扩展：fetch发送请求

首先认清一个辈分：

• xhr
  • jquery
  • axios
• fetch

fetch 和 xhr 的同一个辈分的！！！且window内置了fetch，不用安装任何插件即可使用！且fetch本身就是promise风格的！

1、特点

1. fetch: 原生函数，不再使用XmlHttpRequest对象提交ajax请求
2. 老版本浏览器可能不支持

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)
}

---

---

参阅文档：

• GitHub-Fetch
• 传统 Ajax 已死，Fetch 永生