fetch
Window 接口的 fetch() 方法用于发起获取资源的请求，它会返回一个会在请求响应后兑现的 promise。
.
该 promise 会兑现一个表示请求响应的 Response 对象。
当请求失败（例如，因为请求 URL 的格式错误或网络错误）时，fetch() 的 promise 才会被拒绝。fetch() 的 promise 不会因为服务器响应表示错误的 HTTP 状态码（404、504，等）而被拒绝。因此，then() 处理器必须检查 Response.ok 和/或 Response.status 属性。
也就是说，它不认为404等错误状态码是有错的，因为服务器给了它响应。所以我们要自己处理错误状态码。
.
.
.
fetch核心语法：
<script>
async function func() {
const p = new URLSearchParams({ pname: '广东省', cname: '深圳市' })
const res = await fetch('url?' + p.toString())
if (res.status >= 200 && res.status < 300) {
console.log('请求成功')
const data = await res.json()
console.log(data)
} else {
console.log('请求失败');
}
}
func()
</script>
.
.
.
.
**fetch提交表单数据: **
<body>
<h2>fetch提交formdata</h2>
<!-- 提交图片 -->
<input type="file" class="ipt" />
<!-- 图片回显 -->
<img src="" alt="" class="img-upload">
</body>
<script>
document.querySelector('.ipt').addEventListener('change', async function () {
const img = this.files[0]
const data = new FormData()
data.append('img', img)
// console.log(img);
const res = await fetch('URL', {
method: 'POST',
body: data
})
const result = await res.json()
console.log(result)
// 图片回显
document.querySelector('.img-upload').src = result.data.url
})
</script>
.
.
.
.
.
.
fetch提交JSON:
<script>
document.querySelector('.btn').addEventListener('click', async () => {
// 实例化headers对象, append添加key&value
const headers = new Headers();
headers.append('Content-Type', 'application/json');
const res = await fetch('URL', {
method: 'POST',
headers,
body: JSON.stringify({
username: 'testing.......',
password: '123456.'
})
})
if (res.status === 200) {
const data = await res.json();
console.log(data);
} else {
console.log('请求失败');
}
})
</script>
.
.
.
代码中提交的数据以接口文档的规范来编写。
