使用promise封装 原生ajax，$.ajax(),以及fetch

一、promise封装 原生ajax

1.原生封装

function fetch(url){
    return new Promise((res,rej)=>{
        let xhr=new XMLHttpRequest();
        xhr.open('GET',url);
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4&&xhr.status==200){
                res(xhr.responseText)
            }else{
                rej(xhr)
            }
        }
        xhr.send()
        
    })
    
}

2.请求数据

fetch(url).then((val)=>{console.log(val)},(err)=>{console.log(err)})
.catch((err)=>{console.log(err)})

二、promise封装 JQ ajax

1.JQ封装

function fetch(url){
    return new Promise((res,rej)=>{
        $.ajax({
            url: url,
            type:"GET",
            async:true,
            dataType:"json",
            timeout: 4000,
            success: function(data){
                res(data);
            },
            error: function(XMLHttpRequest){
                rej(XMLHttpRequest);
            },
            complete:function (XMLHttpRequest) {
                rej(XMLHttpRequest);
            }
        });
    })
    
}

2.请求数据

fetch(url).then((val)=>{console.log(val)},(err)=>{console.log(err)})
.catch((err)=>{console.log(err)})

三、fetch

Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应。它还提供了一个全局
fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。 这种功能以前是使用 XMLHttpRequest
实现的。Fetch 提供了一个更理想的替代方案，可以很容易地被其他技术使用

1.fetch请求数据

fetch(url, {
  // get 请求可以省略不写 默认的是GET 
  method: 'get'
})
  .then(function(data) {
  return data.text();
}).then(function(data) {
  console.log(data)
});

2.Response对象

fetch的then中返回的不是一个字面量对象，而是一个Response对象的实例，返回的实例可用以下方法，分别处理数据

arrayBuffer() 获取ArrayBuffer格式的promise对象
blob() 获取Bolb格式的promise对象
json() -获取字符串对象
text()获取json的promise对象
formData() 获取formData格式的promise对象

详见fetch文档

---

总结

不管是原生封装还是JQ封装都给我们提供了一个更简单方便的方法来请求数据，而fetch则不需要封装操作起来也比ajax更加简单。