fetch 使用记录
fetch api出来很多年了 ,由于兼容性问题之前一直没在项目中用到,最近做的项目只需兼容IE9+,把fetch引入了进来。目前用起来感觉挺好的,简洁。
fetch 返回值是promise对象,对于不支持promise的需要引入promise-polyfill: https://www.npmjs.com/package/es6-promise-polyfill 。 对于不支持fetch的需要引入fetch-polyfill :https://github.com/github/fetch
由于fetch不支持jsonp, 如果需要使用jsonp, 可以引入fetch-jsonp :https://github.com/camsong/fetch-jsonp, 其使用方式和fetch基本一样。
//最简单的使用方式:fetch(url, [options]), 对于get请求,参数需添加到url后面 fetch(url).then((response) => response.json()).then((response) => { console.log(response)})
fetch请求提供了非常灵活的配置
1. 直接在options配置
options.method //GET, POST, PUT, DELETE, HEAD options.headers = { // 'Access-Control-Allow-Origin': '*', // 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' //application/json // 'Content-Type': 'multipart/formdata; charset=UTF-8' //application/json }, options.credentials=include //允许请求发送cookie
options.body = new FormData(form) //post请求
options.body = JSON.stringify(params) //post请求
2. 使用 new Headers()创建请求头
let myHeaders = new Headers(); myHeaders.append('Content-Type', 'text/xml'); myHeaders.append('Custom-Header', 'CustomVal'); myHeaders.has('Content-Type');//true myHeaders.get('Content-Type');//text/xml myHeaders.set('Content-Type', 'application/json'); myHeaders.delete('Custom-Header'); //或直接以参数的形式创建 let myHeaders = new Headers({ 'Content-Type': 'application/json' });
创建一个Request 对象来包装请求头:
var myRequest = new Request(url,{ headers:new Headers({ }) }); fetch(myRequest).then((response)=>response.json)
可以发现fetch和Request参数基本一致,可以通过 Request() 和 Response() 的构造函数直接创建请求和响应,但是不建议这么做。他们应该被用于创建其他 API 的结果(mdn上说的)
3. 响应
Response 代表响应,fetch 的then 方法接受一个Response实例
response提高了很多属性和方法,https://developer.mozilla.org/zh-CN/docs/Web/API/Response
其中经常会用到response.json() /response.text() ,返回一个promise对象。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
let fetchFn = function (opts) { let options = { url : '', // 路径 method : 'GET', params: { }, headers : { 'Access-Control-Allow-Origin': '*', 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }, success(){}, error(){} }; options = extend(options, opts); let fetchParams = { method: options.method, headers: options.headers, credentials : 'include' //允许发送cookie } if (options.method == 'GET'){ options.url = toUrlParams(options.url, options.params); // 将参数拼接在url后面 }else{ fetchParams.body = JSON.stringify(options.params); if (options.form){ fetchParams.body = new FormData(options.form) } } fetch(opts.url, fetchParams).then(response => response.json()).then(result => { if (result.code == 0){ options.success(result); }else{ options.error(result); } }).catch(e =>{ console.log(' failed:', e) }); }
参考文档:
https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API
http://www.cnblogs.com/hsprout/p/5504053.html
http://web.jobbole.com/84924/
https://segmentfault.com/a/1190000003810652