javascript请求的理解笔记

现在由于ES6的普及和React、vue的广泛运用出现了很多请求方法，有原生的也有库，所以想着做一下笔记，方便随时使用。

一、Fetch API

Fetch是浏览器的原生API，所以和XMLHttpRequest(XHR)一样是亲儿子，
也可以直接使用，却比XMLHttpRequest(XHR)好用很多，主要有ES6的强大支持。
简单的使用格式：

document.addEventListener('DOMContentLoaded', function(){
      let myHeaders = new Headers({
        "Content-Type": 'application/json'
        // 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
      });

      const data = {"a":1,"b":2};
      const data1 = "a=1&b=2";
      const url = 'http://localhost:8031/aaa';
      fetch(url, {
        body: JSON.stringify(data),
        // body: data1,//如果是这种格式的数据，上面的Content-Type就需要修改成下面那个
        method: 'POST',
        headers: myHeaders,
        mode: 'cors'//默认
      })
      .then((response) => {
        if (response.ok) {
          return response.json();
        } else {
          return Promise.reject('something went wrong!');
        }
      })
      .then(data => console.log('data is', data))
      .catch(error => console.log('error is', error));
    });

下面有两个详细的讲解教程：
https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch
https://blog.csdn.net/qq_40190624/article/details/82871875

二、原生js

        var postData = {
            code: code,
            stdin: '',
            language: '7' 
        };
        
        var xhr = new XMLHttpRequest();
        
        xhr.open("POST", url, true);
        xhr.setRequestHeader("Content-type","application/json");
        xhr.onreadystatechange = function(){
            var XMLHttpReq = xhr;
            if (XMLHttpReq.readyState == 4) {
                console.log(XMLHttpReq.status)
                var text = XMLHttpReq.responseText;
                console.log(text);
                if (XMLHttpReq.status == 200) {
                    var text = XMLHttpReq.responseText;
                    console.log(text);
                }
            }
        };
        xhr.send(postData);

关于跨域，下面有两个具有参考价值的方法：
封装一个Jsonp函数（原生js）https://www.jianshu.com/p/795366c0d2bb
ES6跨域数据访问fetch-jsonp https://blog.csdn.net/liu942626/article/details/79317837

三、JQuery Ajax

基于XMLHttpRequest，必须引入jquery库，如果只是为了请求就引入这个库，得不偿失。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

基本使用格式：

        $.ajax({
          url: 'http://localhost:8031/aaa',
          type: 'POST',//or GET
          data: {
            "a":1,
            "b":2
          },
         // dataType: 'jsonp',//跨域
          success: function (data) {
            console.log('success:', data);
          },
          error: function (err) {
            console.log('error:', err);
          }
        });