服务请求模式

原生Ajax

原生Ajax即XMLHtpRequest (XHR),使用XMLHtpRequest对象异步请求数据，实现前端异步地与服务器交换数据，通过Ajax可以很容易地获取个URL上的数据，XMLHtpRequest最初由微软设计，随后Mila、Apple和Google都支持了(XMLHtpRequs).并被纳入W3C标准中。

function ajax(url, fnSucc, fnFaild) {
//创建Ajax对象
    if (window.XMLHttpRequest) {
        var oAjax = new XMLHttpRequest();
    } else {
        var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
    }
//连接服务器
    oAjax.open('GET', url, true);
//发送
    oAjax.send();
//接收
    oAjax.onreadystatechange = function () {
        if (oAjax.readyState === 4) {
            if (oAjax.status === 200) {
                //alert('成功了: '+oAjax.responseText);
                fnSucc(oAjax.responseText);
            } else {
                //alert('失败了');
                if (fnFaild) {
                    fnFaild();
                }
            }
        }
    }
}

jQuery Ajax

jQuery作为一个提高JavaScript开发效率的轻量级库，拥有完整的Ajax兼容套件，其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。jQueryAjax实质也是原始Ajax的封装，并解决了兼容问题。jQuery Ajax使用jsonp来实现跨域请求，代码如下:

$.ajax({
    type: POST,
    url: url,
    data: data,
    dataType: dataType,
    success: function () {
    },
    error: function () {
    }
});

Axios

Axios是一个用于浏览器和NodeJS的客户端JS库，也是对ES6 Promise模式处理异步操作的封装。Axios本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合ES6规范。

Promise是异步编程的一种解决方案，ES6将其写进了语言标准，统一了语法，原生提供了Promise.

Axios不是原生JS，需要进行安装，它不但可以在客户端使用，也可以在NodeJS客户端使用。Axios 基于Promise对象，提供了一些并发请求的接口，可以轻松实现多个异步函数的调用，能拦截请求和响应，也能取消请求，代码如下：

axios({
  method: 'post',
  url: '/user/123456',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
})
  .then(function(response){
 console.log(response);
})
  .catch(function(error){
  console.log(error)
})

Fetch

Fetch其实就是XMLHttpRequest的一种替代方案，类似于Ajax的异步操作，是一种浏览器原生实现的请求方式。Fetch作为一种比较新的技术，会存在浏览器兼容性的问题，目前Firefox89.0版本和Chrome 87.0版本已经提供支持Fetch。其实现代码如下：

fetch('/some/url',{
    method: 'get'
}).then(function(response){
   //执行成功，处理结果
}).catch(function(err){
//异常处理
});

//链式处理
fetch('/some/url').then(function(response) {
  return;//请求执行成功后的第1步处理
}).then(function(retunedValue) {
//当第1步处理完后进入第2步处理
}).cacth(function(errer) {
//异常处理
});

//await 方式
try {
  let response = await fetch(ur);
  let data = response.json();
  console.log(data);
} catch(e) {
console.log("Oops, error",e);
}

因为Fetch在请求时，GET()方法与POST()方法传递参数有所不同，可以封装一个简单的Fetch,用来实现GET请求和POST请求参数的统一。在实际应用中，还可以根据需求进一步封装，更好地发挥其优势，代码如下：

/*将对象转为a=1&b=2的形式
@param obj 参数对象*/
function obj2String(obj,arr=[],idx=0) {
  for (let item in obj) {
    arr[idx++]=[item.obj[item]]
  }
  return new URLSearchParams(arr).toString();
}

/* 真正的请求
@param url请求地址
@param options 请求参数
@param method 请求方式*/
function commonFetcdh(url,options,method ='GET') {
const searchStr = obj2String(options);
let initObj= {}
if (method === 'GET') {
  url += "?" + searchStr
  initObj = {
    method: method,
    credentials: 'include'
  }
} else {
  initObj= {
    method: method,
    credentials: 'include',
    headers: new Headers({
      'Accept': 'application/json',
      'Content-Type': 'application/x-www-from-urlencoded',
    }),
    body: searchStr
  }
}      
fetch(url,initObj).then((res)=> {
    return res.json()
  }).then((res)=> {
  return res;
  })
}

/* GET请求
@param url请求地址
@param options 请求参数*/
function GET(url, options) {
   return commonFetcdh(url,options,'GET')
}

/*POST请求
@param url请求地址
@param options 请求参数*/
function POST(url,options){
   return commonFetcdh(url,options,'POST');
}

Fetch的代码结构比原生Ajax的代码结构简单，参数与jQuery Ajax类似。但Fetch是原生的JS API，脱离了XHR，是ES6规范中新的实现方式。