fetch

公告

View Post

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>

.
.
.
代码中提交的数据以接口文档的规范来编写。

posted on 2024-09-06 15:25 番茄仔Mandy 阅读(74) 评论(0) 收藏举报

刷新页面返回顶部

mandyGuan12

公告

View Post

fetch