用fetch获取数据
最近用react+webapck构建一个项目,获取数据时再用jq的ajax仿佛已经格格不入。用网上流行的
fetch发现是挺好用的,但是浏览器兼容性实在太差了,手机端几乎全部不支持,也不支持跨域jsonp
用whatwg-fetch试了一下,发现是可以用的,而且跟fetch无二
还有一个就是axios,不过暂时还没有用。
附:fetch代码
function http(url, setting) { //设置参数的初始值 let opts={ method: (setting.method || 'GET').toUpperCase(), //请求方式 headers : setting.headers || {}, // 请求头设置 credentials : setting.credentials || true, // 设置cookie是否一起发送 body: setting.body || {}, mode : setting.mode || 'no-cors', // 可以设置 cors, no-cors, same-origin redirect : setting.redirect || 'follow', // follow, error, manual cache : setting.cache || 'default' // 设置 cache 模式 (default, reload, no-cache) } let dataType = setting.dataType || "json", // 解析方式 data = setting.data || "" // 参数 // 参数格式化 function params_format (obj) { var str = '' for (var i in obj) { str += `${i}=${obj[i]}&` } return str.split('').slice(0, -1).join('') } if (opts.method === 'GET') { url = url + (data?`?${params_format(data)}`:'') }else{ setting.body = data || {} } return new Promise( (resolve, reject) => { fetch(url, opts).then( async res => { let data = dataType === 'text' ? await res.text() : dataType === 'blob' ? await res.blob() : await res.json() resolve(data) }).catch( e => { reject(e) }) }) }
import 'whatwg-fetch'; require('es6-promise').polyfill(); let common_url = '/weixin'; //服务器地址 let token = ''; /** * @param {string} url 接口地址 * @param {string} method 请求方法:GET、POST,只能大写 * @param {JSON} [params=''] body的请求参数,默认为空 * @return 返回Promise */ function fetchRequest(url, method, params = '') { let header = { "Content-Type": "application/json;charset=UTF-8", "accesstoken": token //用户登陆后返回的token,某些涉及用户数据的接口需要在header中加上token }; console.log('request url:', url, params); //打印请求参数 if (params == '') { //如果网络请求中没有参数 return new Promise(function (resolve, reject) { fetch(common_url + url, { method: method, headers: header, credentials: 'include' }).then((response) => { if (response.ok) { return response.json(); } else { console.log(response) reject({ status: response.status }) } }).then((responseData) => { resolve(responseData); }) .catch((err) => { reject(err); }) }); } else { //如果网络请求中有参数 return new Promise(function (resolve, reject) { fetch(common_url + url, { method: method, headers: header, credentials: 'include', body: JSON.stringify(params) //body参数,通常需要转换成字符串后服务器才能解析 }).then((response) => { if (response.ok) { return response.json(); } else { console.log(response) reject({ status: response.status }) } }).then((responseData) => { resolve(responseData); }) .catch((err) => { reject(err); }) }); } } export default fetchRequest;