1.原生http请求
var url = 'https://b2b.pre.choicesaas.cn/choice-b2b/purchase/querySaleOrderList';
var __req = null;
if (window.XMLHttpRequest){
__req = new XMLHttpRequest();
} else if (window.ActiveXObject){
__req = new ActiveXObject("Microsoft.XMLHTTP");
}
if(__req){
__req.onreadystatechange = function(){
if(4 == __req.readyState){
if(200 == __req.status){
if('function' == typeof cb){
cb(__req.responseText);
}
}else{
}
}
};
__req.open("GET", url, true); // 1 请求方式 2 请求地址 3 是否异步
__req.send(null);
}
2.fetch请求
const fetch1 = function ({url, ...params}) {
return new Promise((reslove, reject) => {
fetch(url, {
...params,
// credentials: 'include',
}).then(res => {
if (res.ok) {
reslove(res.json());
} else {
reject(res);
}
}).catch(err => {
reject(err);
})
});
}
const obj = {
fetchPost: async function() {
const url = 'http://localhost:3003?callback=handleBack';
const res = await fetch1({
method: 'POST',
url,
});
console.log('---res', res);
}
}
obj.fetchPost();
3.上面是封装多得fetch，直接使用的fetch
fetch('http://localhost:3003').then(res => {
// console.log('---res', res.json());
// 一个then里面不能同时操作两次和两次以上的res
// 同时使用多次就会报错 ---> index.html:43 Uncaught (in promise) TypeError: body stream already read
// throw new Error('test');
return res.json(); // 是一个promise对象
}).then(res => {
console.log('----dddd', res);
});
// --------------下面是form上传时候------------------
const formData = new FormData();
formData.append('oper_id', '11');
formData.append('oper_name', 'kong');
const obj = {a: '1', b: '2'};
fetch('http://localhost:3003', {
method: 'POST',
body: formData,
}).then(res => {
// console.log('---res', res.json());
// throw new Error('test');
return res.json();
}).then(res => {
console.log('----dddd', res);
})
// -------请求头
// Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryTYuWBZ9zVtyRNm5q
// -------
fetch请求对某些错误http状态不会reject封装一下
// 服务器返回 400，500 错误码时并不会 reject，只有网络错误这些导致请求不能完成时，fetch 才会被 reject
function checkStatus(response) {
if (response.status >= 200 && response.status < 300) {
return response;
}
const error = new Error(response.statusText);
error.response = response;
throw error;
}
function parseJSON(response) {
return response.json();
}
export default function request(url, options) {
let opt = options||{};
return fetch(url, {credentials: 'include', ...opt})
.then(checkStatus)
.then(parseJSON)
.then((data) => ( data ))
.catch((err) => ( err ));
http请求头中的content-type
application/json
传递的是一个json对象，并不是直接丢一个对象过去，需要进行序列化，JSON.stringify(data)application/x-www-form-urlencoded
例如我们发送一个登录请求，参数是{user:1234,pwd:1234},最终提交服务器的是user=1234&pwd=1234-
multipart/form-data
------WebKitFormBoundaryPQAsHbjoSqoJ1WXl
Content-Disposition: form-data; name="oper_id"11
------WebKitFormBoundaryPQAsHbjoSqoJ1WXl
Content-Disposition: form-data; name="oper_name"kong
------WebKitFormBoundaryPQAsHbjoSqoJ1WXl--
