fetch记录一下子

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

1. application/json
   传递的是一个json对象，并不是直接丢一个对象过去，需要进行序列化，JSON.stringify(data)

2. application/x-www-form-urlencoded
   例如我们发送一个登录请求，参数是{user:1234,pwd:1234},最终提交服务器的是user=1234&pwd=1234

3. multipart/form-data
   ------WebKitFormBoundaryPQAsHbjoSqoJ1WXl
   Content-Disposition: form-data; name="oper_id"

   11
   ------WebKitFormBoundaryPQAsHbjoSqoJ1WXl
   Content-Disposition: form-data; name="oper_name"

   kong
   ------WebKitFormBoundaryPQAsHbjoSqoJ1WXl--