最近用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;