发送网络请求
原生Ajax
1.新建请求(XMLHttpRequest对象)
const aj = new XMLHttpRequest()
2.开启请求
aj.open('GET/POST','URL')
3.发送请求
aj.send()
4.接受响应(通过监听事件onreadystatechange是否执行完毕)
aj.onreadystatechange = function(){
if(aj.readyState(事件进展) === XMLHttpRequest.Done $$ aj.status(状态码) === 200)
{
console.log(aj.responseText)
JSON.parse(aj.responseText)(将字符串转为JavaScript对象)
}
}
注:get请求传入参数通过URL后接上 问号 参数名 = 参数值 & 参数名 = 参数值 的形式传入
Post请求传入参数发生在使用send()中,且需要设置响应头对发送内容进行声明
aj.setRequestHeader(‘Content-Type’,'application')
Axios
1.引入Axios
2.发送请求
axios.get('URL'),{ params:{键名=键值} }
baseURL简约:const ins = axios.create({ baseURL:' ' })
ins.get('URL-baseURL')
3.拦截器(请求发送到服务端前或响应返回到客户端前)
请求:ins.interceptors.request.use(config => { return config })
响应:ins.interceptors.response.use(res => { return res })
Fetch API
1.get发送请求
const get = fetch('URL')
2.get处理返回数据
fh.then(res=>{
if(res.ok){
return res.json()(将结果直接转为对象并返回)
}
})
fh.data(data=>{
console.log(data)
})
3.post发生请求
const fetch('URL',{ method:'POST',
headers:{
'Content-Type:''application/json'
},
body:JSON.stringify({
键名:键值
})
}
)
.then(res=>{
return res.json()
})
.then(data=>{
console.log(data)
})