1.数据请求的四种方式：
1.ajax请求：
原生js提供的，其核心是XMLHttpRequest对象，多个请求之间如果存在先后关系，就会出现回调地狱问题。
2.fetch数据请求
和ajax一样，也是一种原生js提供的内置，使用promise形式，关注分离思想，但是兼容性不太好，所以使用的不是很多，在小小项目中可以使用
3.jquery数据请求
封装原生的ajax请求，使用回调形式
4.axios请求
封装原生的ajax请求，使用promise形式，可以在请求和响应阶段进行拦截(需要引入第三方库)
主要介绍原生ajax和axios请求
ajax请求：
优点：页面无刷新，用户体验好，异步通信，更加快的响应能力等..
请求方式：get post
(1)get，post的区别
1.get请求的时候将提交的数据拼接到url里面，任何人可见
2.post请求将提交的数据放到请求头上，日他人不可见
(2)提交数据大小限制不同
get请求对数据的大小限制(适用于飞铭感数据和小数据)
post请求对数据没有大小限制(适用于敏感数据和大数据)
ajax使用的五个步骤：
1.创建一个XMLHttpRequest对象
var xmlHttp=new XMLHttpRequest();
2.设置请求方式和请求地址(使用open（methods,url,async）方法)
methods:请求方式，get或者post,r如果没写默认是get
url：请求路径，文件在服务器上的位置
async:是否为异步请求，(默认是true,异步请求)
3.发送send()请求
如果为post，需要使用setRequestHeader()来添加http头
4.监听状态的变化
每当readyState状态改变时候，就会触发onreadystatechange事件，执行回调函数
readyState存有XMLHttpRequest的5种状态，从0·4发生变化。
0：请求未初始化
1.服务器连接已建立
2.请求已接收
3.请求处理种
4.请求已完成，且响应已就绪
5.处理返回的结果：
根据请求服务器返回状态码(status)
大于200 小于300 或者等于304 则表示请求成功，否则服务器请求失败
获取服务器中响应，使用XMLHttpRequest对象或者responseText或responseXML属性
responseText:获取字符串形式的响应数据
responseXML:获取XML形式的响应数据
<button>发送请求</button>
<script>
window.onload=function () {
var btn =document.querySelector("button");
btn.onclick=function () {
//get请求
//1.创建一个异步对象
var xmlhttp=new XMLHttpRequest();
//2.设置请求方式和请求地址
xmlhttp.open("GET","07-Ajax-get.php"+"?userName=lnj&userPwd=123456",true);
//3.发送请求
xmlhttp.send();
//4.监听状态的变化
xmlhttp.onreadystatechange=function () {
if (xmlhttp.readyState === 4) {
//5.处理返回的结果
if (xmlhttp.status>=200 && xmlhttp.status<300 ||xmlhttp.status===304){
console.log(xmlhttp.responseText); //输出服务器响应的内容
}else{
console.log("没有接收到服务器的数据");
}
}
}
}
//post请求
var xmlhttp=new XMLHttpRequest();
xmlhttp.open("POST","10-Ajax-post.php",true);
//post方式时需要使用setRequestHeader()来添加http头,将该内容放在设置请求与发送请求之间；
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//发送请求, 将要提交的数据放在send()中；
xmlhttp.send("userName=liu&userPwd=654321");
xmlhttp.onreadystatechange=function () {
if (xmlhttp.readyState === 4) { //请求完成时响应；
if (xmlhttp.status>=200 && xmlhttp.status<300 ||xmlhttp.status===304 ){
console.log(xmlhttp.responseText);
}else{
console.log("没有接收到服务器的数据");
}
}
}
}
}
</script>
axios是一个轻量级的库，支持promise，可以拦截请求和响应等....
安装：npm install axios
引入：import axios from "axios
1.axios的基本使用：
//get
axios.get('http://123.207.32.32:8000/home/data?type=sell&page=3')
.then((response)=> { console.log(response)})
.catch((error)=> {console.log(error)})
可以通过向 axios 传递相关配置的方式来创建请求,如下：
axios({
methods:"get" //请求方式不写就默认为get请求
url:"http://123.207.32.32:8000/home/data?type=sell&page=3",
}).then(res=>{ //数据请求成功，res为成功数据
console.log(res);
}).catch((err)=>{
console.log(error);
)
//可以将url拆分开，将后面的参数单独放在params中
axios({
methods:"get"
url:"http://123.207.32.32:8000/home/data",
params:{
type:"sell",
page:3
}
}).then(res=>{ //请求成功
console.log(res);
})
//post
axios({
method: 'post',
url: '/user/12345',
data: { //post传递参数
firstName: 'Fred',
lastName: 'Flintstone'
}
}).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
在项目中最常用的就是全局配置axios:
//全局配置内容
axios.defaults.baseURL="http://123.207.32.32:8000"
axios.defaults.timeout=5000
axios.all([
axios({
url:"/home/multidata",
}),
axios({
url:"/home/data",
})
]).then(results => {console.log(results) })
全局配置完axios请求之后，还可以配置拦截器，主要是为了对信息的进一步加工，减少请求的次数：
/2.axios的请求拦截器, 拦截的是instance请求中的config内容。
instance.interceptors.request.use(config =>{
//这里的config包含每次请求的内容,如请求头、url、传参data等等。
console.log(config);
//请求拦截后会做什么事情？？？
//1.比如：config中的一些信息，不符合服务器的要求， 对信息修改会转化
//2.比如：某些网络请求(登录..)，必须携带一些特殊的信息，则将它拦截，然后判断一下，如果没带特殊信息，则给它提示
return config
//请求拦截,操作后返回config,不然请求拦截了服务器不会响应,拿不到结果。
},err => {
console.log(err);
})
//3.axios的响应拦截器, 拦截的是服务器返回的结果res
instance.interceptors.response.use(res=>{
//这里的res包含服务器响应的data、响应头、状态码,配置等等。
console.log(res);
//拦截后，进行相关操作...
return res.data
//若需要数据，则可以只返回拦截内容中的data就可以了
},err=>{
console.log(err);
})
拦截器最常见的操作是搭配路由进行操作：
// http response 拦截器
axios.interceptors.response.use(
response => {
if (response.data.errno === 999) { //过期服务器返回错误码
router.replace('/');
console.log("token过期");
}
return response;
},
error => {
return Promise.reject(error);
}
);
这里验证如果token过期，就直接配合路由跳转到登录页面扩展：
HTTP请求报文由3部分组成 =>（请求行+请求头+请求体）
请求头 存放通知服务器有关于客户端请求的信息，一般用来存放一些cookie，token等信息(属性：属性值)
常见的请求头有：
cookie : 浏览器端cookie
Accept ：告诉服务端 客户端接受什么类型的响应。
Authorization HTTP授权的授权证书 ——》用来设置tokenheaders:
{
authorization: `Bearer ${token}`,
//将token放到请求头中，Authorization属性存放验证
},
Referer：表示这个请求是从哪个URL过来的
application/json ： JSON数据格式
Connect-Type : 显示此HTTP请求提交的内容类型。一般只有post提交时才需要设置该属性。等等。
响应头 Response Header
常见的响应头有：
Accept-Ranges：表明服务器是否支持指定范围请求及哪种类型的分段请求
Expires：响应过期的日期和时间
常见的响应码有：
1. 200 OK
2. 303 See Other ，把redirect到其它的页面
3. 404 Not Found ，责任在客户端 ，即找不到页面
4 .5xx 处理发生错误，责任在服务端，如服务端抛出异常，路由出错等
