AJAX(4) 使用

面试到现在为止，Promise可以说是必问的，也曾是我最害怕的问题，今天这里做一个对promise的总结。主要谈谈怎么用。
到目前为止，我已经总结了什么是AJAX，JSONP等等，但是一翻阅，发现自己并没有好好总结到底该怎么用，于是现在写一篇文章，总结一下到目前为止我所知道的能常用的请求的发送方法以及处理。 总共有四种

jQuery

这个应该是目前我还有用jQuery的地方因为确实太香了，很符合我的开发逻辑。这里给上一个使用范例：

$.ajax({
    url:'http://localhost:3000/posts',  //发送请求的接口名字，不传https?默认按照当前的url路径去发送请求
    data:{name:'1231'},  //发送请求时候传的参数
    dataType:'json', //发送的请求参数的格式
    type:'GET', // 发送请求的方法
    success:(res)=>{ //请求成功之后
        console.log(res)},  
    error:err=>{ //请求失败之后
        console.log(err);
    }
})

还有一堆，要用了自己查，给上文档

axios

这个我做到目前为止还没用过，不过据说挺香的。这是我用它发的一些简单的请求。

//这是最简单的
axios.get(url)
    .then(res => {
        console.log(res);
    }).catch(error => {
    console.log(error);
})
axios.get('http://localhost:8080/JavaScript',{
    //这个里面可以传任何参数,可以把请求在这里设置
    params:{
        id:1
    }}).then(res=>{
        console.log(res);
    }).catch(error=>{
        console.log(error);
})

aixos相比于其他最方便的点在于，它提供了一些并发请求的接口，代码如下：

//请求Server
const getServerData = ()=>{
    return axios.get('http://localhost:8080/Server')
}

//请求JavaScript
const getJavaScriptData = ()=>{
    return axios.get('http://localhost:8080/JavaScript')
}

axios.all([getJavaScriptData(),getServerData()])
    .then(axios.spread((JavaScript,server,res3)=>{
        console.log(JavaScript);
        console.log(server);
    }))

其中axios.spread用来取得axios.all中数组传的参数返回的值。其实这个就是Promise.all的一个封装，本质上就是调用了Promise.all。

fetch

这个是目前项目中我在做的，还是写个基本的

fetch('http://localhost:8080/Javacript?id=1').then(res=>{
    if (res && res.status === 200){
        console.log(res);
        return res.json()
    }else {
        return new Error()
    }
}).then(res=>{
    console.log(res);
}).catch(error => {
    console.log(error);
})

fetch的不同点在于返回的值需要额外进行一次处理，根据数据处理的不同的处理，有诸如json,blob（处理文件）。而且fetch不会发送cookies,除非使用了credentials这个初始化选项。

原生

总结一个原生的XMLHttpRequest的写法，算是巩固和知新

// http://localhost:8080/JavaScript
const req = new XMLHttpRequest();
req.open('GET','http://localhost:8080/JavaScript')
req.onreadystatechange = ()=>{
    if (req.readyState === XMLHttpRequest.DONE && req.status === 200){
        console.log(req.response);
    }
}
req.send();

以上就是我知道的常用的来请求http请求的方法。

面试题

对于以上三个，常有的面试题是请说说这三种方法的区别，这里我写写我的。

jQuery是对于原生的AJAX的封装，最大的不同点在于往往需要整个jQuery的引入（jQuery的个性化打包不能享受CDN的服务），导致项目的包太大，而且Jquery并没有返回Promise。而fetch的返回值会是一个http响应体，还需要再一次进行处理，而且fetch本身不发送cookies，还需要自己配置。axios相对比两者，最大的方便处在于他封装了并发请求的接口，非常方便