下面是关于“js fetch异步请求使用实例详解”的完整攻略。
Fetch 是一个基于 Promise 的 HTTP 请求 API,它是一种用于网络资源获取的新标准。
相对 XMLHttpRequest(XHR),它提供了更加简洁易用的接口,同时还支持更多的功能,如请求取消、跨域请求等。
fetch 最简单的用法是向指定 URL 发送 GET 请求,并对结果进行处理。
fetch('http://example.com/movies.json')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))
这里我们向 http://example.com/movies.json
发送 GET 请求,得到一个 Response
对象,然后通过 response.json()
方法去解析响应体,并将解析后的数据打印出来。
如果请求出错,我们可以通过 .catch
方法去处理错误。
下面是一个向指定 URL 发送 POST
请求的示例:
// 请求参数对象
const data = {
name: 'jack',
age: 20
};
fetch('http://example.com/user', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))
在向 http://example.com/user
发送请求时,我们需要明确请求方法是 POST
,并且在请求头中设置请求体类型为 application/json
。同时我们把请求参数对象转为 JSON 字符串,放到请求体中。
当我们向其他域名的地址使用 fetch 请求时,可能会受到同源策略的限制,因此我们需要设置跨域请求的配置。
可以在 fetch()
函数的第二个参数中指定相关配置,如下:
fetch('http://example.com/user', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data),
mode: 'cors' // 配置跨域请求
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))
在 mode
中指定 cors
,表示要使用跨域请求。
上述是 fetch 的一些基本用法和示例,包括发送 GET/POST 请求以及设置跨域请求等。我们可以根据实际需求设置相关的请求头、请求体和选项,通过 Promise 的方式进行链式操作,最终获取到请求的结果。
fetch API 虽然更简洁易用,但也有一些代码层面上的问题,如在某些浏览器上缺少对 catch()
的支持,使用起来需要谨慎。
本文链接:http://task.lmcjl.com/news/9575.html