fetch简介
在 AJAX 时代,进行请求 API 等网络请求都是通过XMLHttpRequest 或者封装后的框架进行网络请求。而在前端快速发展地过程中,为了契合更好的设计模式,产生了 fetch 框架。 fetch相比XMLHttpRequest,提供更加强大、高效的网络请求方式,所以在 Hybrid App 开发模式中,大量的用到了fetch框架作为网络请求。
fetch在浏览器中使用
在 Chrome 浏览器中已经全局支持了 fetch 函数,打开调试工具,在 Console 中可以进行体验下fetch。先不考虑跨域请求的使用方法,我们先请求同域的资源。例如:
fetch("http://blog.csdn.net/xiangzhihong8").then(function(response){console.log(response)})
fetch语法
使用 fetch 的构造函数请求数据后,返回一个 Promise 对象,然后根据具体的实际情况处理。
"http://baidu.com") .(response){ })
说明,在请求后的 Response 中,常常有如下返回情况:
- Response.status 也就是 StatusCode,如成功就是 200 ;
- Response.statusText 是 StatusCode 的描述文本,如成功就是 OK ;
- Response.ok 一个 Boolean 类型的值,判断是否正常返回,也就是 StatusCode 为 200-299 。
fetch请求实例
1.使用get方式进行网络请求,例如:
'http://nero-zou.com/test',{ method: 'GET' }).(response) { }).catch((err) { });
2.使用post方式进行网络请求,例如:
let param = {user:'xxx',phone:'xxxxxx'}; fetch(url,{ method: 'post',114)">body: JSON.stringify(param) }).then(function(response) { { fetch(url,{ method: body: catch(e) { }
4.带header 或其它参数,例如:
fetch(url,{ method: 'POST',headers: { 'Accept': 'application/json','Content-Type': body: JSON.stringify({ firstParam: 'yourValue',secondParam: 'yourOtherValue',}) })
fetch请求并填充界面
原文链接