请求利用网络，把信息从服务器传输到客户端本地（浏览器）,页面资源越多，传输的次数就越多
原生AJAX
原生AJAX通过XMLHttpRequest对象的方法来请求网络数据，其配置方式如下
open开启请求
参数一 ： 发送请求的类型
- get 获取
- post 发送
参数二 ： 发送请求的地址（服务器地址）拼接后台请求接口
const xhr = new XMLHttpRequest();
xhr.open('GET', 'URL_ADDRESS/common/get'); //配置请求
get带数据发送
有时我们需要获取特定内容，需要本地上传数据供服务器筛选，如用户id等，可以在地址的后面用?拼接相应字段，每个部分之间用&连接
xhr.open('GET', 'URL_ADDRESS/common/get?name=user&age=18);
xhr.send() //发送请求
post带数据发送
如登录、注册时传输用户名及设定的密码等信息，新增内容给服务器进行操作
xhr.open('POST', 'URL_ADDRESS') // 配置请求
//向服务器说明数据类型是urlencoded格式 （名=值&名=值） （json格式是application/json）
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
//向服务器发送数据
xhr.send('username=admin&password=123456')
接收服务器返回的数据
返回的数据需要在xhr.onreadystatechange事件中接收 该事件可以监听请求的各类状态，状态改变就会被触发，满足条件即执行相应操作 （open、send、响应、下载中、下载完成等状态）
xhr.onreadystatechange = function () {
// 当请求完成且返回状态码为200（成功）时
if (xhr.readyState == 4 && xhr.status == 200) {
//返回的数据看起来是对象，实际上是字符串，需要用json进行转换
let data = JSON.parse(xhr.responseText);
console.log(data);
}
}
网络请求库axios
是封装好的请求库工具
发送请求并处理
get
法一 数据拼接 + then
axios.get('URL_ADDRESS/common/get?name=user&age=18').then()
法二 params数据包 + asnyc
(async () => {
const res = await axios.get('URL_ADDRESS/common/get', {
params: {
name: 'user',
age: 18
}
})
console.log(res.data)
})()
post
数据包(不需要写params) + asnyc
(async () => {
//进行axios自定义设置 如使用axios.create来进行基地址的配置 用新的实例（url）接收，以简化书写。axio会帮助我们做地址的拼接
const url = axios.create({
baseURL: 'URL_ADDRESS'
})
const res = await url.get('/common/get', {
params: {
name: 'user',
age: 18
}
})
console.log(res.data)
})()
拦截器
在请求发送后，可经请求拦截器拦截，判断请求类型、鉴权（是否有权限访问）等。
服务器收到请求后，返回的数据可经响应拦截器拦截，进行预处理，如格式等。处理完成再由底部功能接收。
(async () => {
const url = axios.create({
baseURL: 'URL_ADDRESS/'
})
//请求拦截器 用于在请求发送之前，统一处理请求参数
url.interceptors.request.use((config) => {
//如添加时间戳参数，防止缓存
config.params = {
...config.params,
_t: Date.now()
}
//继续发送请求
return config
})
//响应拦截器 用于在请求返回之后，统一预处理返回的数据
url.interceptors.response.use((res) => {
return res.data
})
const res = await url.get('common/get')
const res2 = await url.get('common/post',{
name: 'user'
})
})()
AJAX的替代者Fetch API
fetch是一个函数，默认为get请求，返回promise对象
get
fetch('URL_ADDRESS/common/get?name=user&age=18').then((res) => {
if (res.ok) return res.json()
}).catch((err) => {
console.log(err)
})
.then((data) => {
//返回后仍可以基于数据做相应的处理
console.log(data)
});
post
fetch('URL_ADDRESS/common/post',{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
//post请求体
body: JSON.stringify({
name: 'user',
age: 18
})
}).then((res) => {
if (res.ok) return res.json()
})
