JS数据交互之ajax

ajax

ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

ajax可以在不刷新页面的前提下向后端 发送/请求 数据，在开发中是必然会用的技术。

原生的ajax

var xhr;
if (window.XMLHttpRequest) {　 // 标准浏览器
    xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) { // 低版本IE
    try {
        xhr = new ActiveXObject('Msxml2.XMLHTTP');
    } catch (e) {
        try {
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        } catch (e) {}
    }
}
if (xhr) {
    xhr.onreadystatechange = onReadyStateChange;
    xhr.open('POST', '/url', true);
    // 设置 Content-Type 为 application/x-www-form-urlencoded
    // 以表单的形式传递数据
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send('username=admin&password=root');
}

// onreadystatechange 方法
function onReadyStateChange() {
    /*
    xhr.readyState：
        0: 请求未初始化
        1: 服务器连接已建立
        2: 请求已接收
        3: 请求处理中
        4: 请求已完成，且响应已就绪
     */
    if (xhr.readyState === 4) {
        // 请求处理到了最后一步
        /*
        xhr.status 状态码
            100+  请求已被接受，需要继续处理
            200+  请求已成功被接受和处理
            300+  通常代表重定向
            400+  客户端请求发生了错误
            500+  服务端发生了错误
         */
        if (xhr.status >= 200 && xhr.status < 300) {
            console.log(xhr.responseText);//xhr.responseText请求返回的文本内容
        } else {
            console.log('There was a problem with the request.');
        }
    } else {
        // 请求还没处理到最后一步
        console.log('still not ready...');
    }
}

没用经过封装的原生ajax看起来非常复杂，使用起来代码也极为不协调，并且如果需要多次顺序请求，就会出现回调地狱，所以一般我们不会直接使用原生ajax。

jQuery的ajax

使用jQuery的ajax之前需要先引入jQuery库。我们可以下载jQ源码来引入，或者直接从各种CDN库引入，比如引入jq3.3.1版本：。

$.ajax({
    method : "POST" //请求方式
    ,url : "/url" //请求地址
    ,data : {} //需要发送的数据
    ,dataType : "json" //对请求返回的数据预处理
    ,success : function(data){} //请求成功的回调函数
    ,error : function(err){} //请求失败的回调函数
});

//另外有单独的  $.get()  $.post() 方法快捷使用

jq的ajax用起来就好多了，但是还是没有解决回调地狱的问题。

fetch与axios

fetch与axios都使用了ES6的Promise方案来解决回调地狱的问题，所以目前我们在使用ajax的时候，比较多的都是采用这两种方案。从功能与完善度来讲，axios更好用。

fetch

fetch是ES6引入的新API，所以只要浏览器支持ES6，那么对fetch就是支持的，不需要额外的引入。

基础使用：

fetch("/url",{method:"post"}) //路径，各项参数
    .then((res)=>{
    	return res.json(); //将返回的数据格式化
	})
    .then((data)=>{
    	console.log(data); //最终拿到的数据
	});

fetch是一个底层的API，很多功能使用起来并不完美，比如它会把400/500这种状态码当成成功来处理，默认也不带cookie，并且不支持超时控制与阶段监听。所以，一般情况下，我们推荐使用axios，而不是fetch。

axios

axios是一个基于Promise的HTTP库，可以用在浏览器和node.js中。原生js并不支持axios，浏览器环境需要引入axios ，node环境需要安装对应的包。

基础使用：

//get
axios
    .get(
        "http://api.afei.fun" //url
        ,{params : {name : "affei",age : 18}} //传过去的数据
    )
    .then(res=>{
        console.log(res);
    })
    .catch(err=>{
        console.log(err);
    });

//post
axios
    .post(
        "http://api.afei.fun" //url
        ,{name:"afei",age:18} //传过去的参数
    )
    .then(res=>{
        console.log(res);
    })
    .catch(err=>{
        console.log(err);
    });

直接执行：

//直接执行axios，各项参数额外配置
axios({
        method : "post"
        ,url : "http://api.afei.fun"
        ,data : {name:"afei",age:18}
	})
    .then(res=>{
    	console.log(res);
	})
    .catch(err=>{
    	console.log(err);
	});

发送多个请求：

//同时发送两个请求，等到都处理完后执行回调
function reqA(){
    return axios.get("url1");
}
function reqB(){
    return axios.get("url2");
}

axios
    .all( [ reqA(),reqB() ] )
    .then(res=>{
        console.log(res);
    });

全局拦截器：

//在所有axios请求发送之前，先执行这里
axios.interceptors.request.use(config=>{
    //config.method = "get";
    console.log(config);
    return config;
},err=>{
    console.log(err);
    return Promise.reject(err);
});

//在所有的axios请求成功之后，（在回调执行之前）先执行这里
axios.interceptors.response.use(response=>{
    console.log(response);
    return response;
},err=>{
    console.log(err);
    return Promise.reject(err);
});

//请求
axios
    .post(
        "http://api.afei.fun"
        ,{name:"afei",age:18}
    )
    .then(res=>{
        console.log(res);
    })
    .catch(err=>{
        console.log(err);
    });

移除拦截器：

//需要现在添加的时候得到返回值，方便于移除
let interceptor = axios.interceptors.request.use(config=>{
    //config.method = "get";
    console.log(config);
    return config;
},err=>{
    console.log(err);
    return Promise.reject(err);
});

//移除
axios.interceptors.request.eject(interceptor);

创建实例：

//创建实例提前配置一些参数，这样后期在使用的时候，就无需重复配置了
let myInstance = axios.create({
    //这里可以写默认配置项
});

//发送请求时，会带上默认的配置
myInstance.get("url")
    .then(res=>{
    	console.log(res);
	})
    .catch(err=>{
    	console.log(err);
	});

//还可以只为该实例设置拦截
myInstance.interceptors.request.use(/*……*/)