前言
近两天在公司写登录的时候发现我居然快忘记fetch请求和原生实现请求的方式了，估计是太久没看了荒废了，在此记录一下发起http请求的方式，方便后续自己查看。
一、原生请求
虽然我们在真实的项目开发中很少用到原生ajax但是我们还是需要知道如何编写原生ajax。
let xhr = new XMLHttpRequest();
xhr.open('GET','url',true)；
xhr.onReadyState(()=>{
})
二、jquery ajax请求
jquery ajax 终究还是老了，它随着jquery 一起没落了，随着前端框架和原生js的迅速崛起，原本属于jquery 的王朝时代已然宣告灭亡，当然在那个时代jquery ajax 还是很好用的接下来看看优点。
优点的话我就只能想到一个 ，相对原生语法更简洁，加上它本身操作dom的简洁性和链式操作。
// get
$.ajax({
method: 'GET'
url:url,
success:(data)=>{
console.log(data)
}
});
// post
$.ajax({
method: 'POST'
url:url,
data:'yourData',
success:(data)=>{
console.log(data)
}
})
三、fetch请求
fetch 被成为ajax的替代品，我并不这样以为，而且fetch 是未封装的原生请求方式，意味着开发者可自行封装fetch 且不会让项目的体积变大。那么fetch 凭什么可以替代ajax呢 。
优点如下：
1、语法简洁，更加语义化
2、基于标准 Promise 实现，支持 async/await
3、同构方便，使用 isomorphic-fetch
接下来我们来看下fetch 请求的方法，后面我会附上自己写的一个fetch请求
fetch(url,{
method:'POST',//'GET'
mode:'cors',// 跨域请求
header: new Headers({
'Content-Type': 'application/json',
}),
body:'yourData'
}).then(data=>{
let res = data.json();
res.then(data=>{
console.log(`ok${
data}`)//到此数据就拿到了
})
})
四、axios请求
axios 请求其实还是 XMLHttpRequest 请求，不过，是使用promise封装实现。由于各大框架统一都是推荐axios来请求数据，axios已然成为主流。
优点如下：
1、支持promise api
2、从客户端防止CSRF
3、提供并发请求API
接下来我们看下axios用法
async getUserList(){
let res = await axios.get(url)
}
// 或者
axios.get(url).then(data=>{
console.log(data)
})
//当然post也可以这样
async addUser(){
let res = await axios.post(url,{
data:'yourData'
})
}
const server_url = "www.baidu.com"
const header = {
'content-type':'application-json'
}
const http = {
get(url) {
return new Promise((resolve, reject) => {
fetch(server_url+url,{
mode:"cors",
// credentials:'include',
}).then(res => {
res.json().then(resData => {
resolve(resData);
})
}).catch(err => {
console.log("err:"+err);
reject(err);
})
})
},
post(url,params){
return new Promise((resolve,reject)=>{
fetch(server_url+url,{
headers: header,
mode: 'cors',
method: 'POST',
body: JSON.stringify(params),
}).then(res => {
res.json().then(resData => {
resolve(resData)
})
}).catch(err => {
console.log("err:"+err);
reject(err);
})
})
}
}
总结
虽然现在请求的方式那么多，但是还是需要根据项目来选择适合的方式，避免项目体积变得庞大，当然个人项目就没必要考虑这么多的东西，看自己个人习惯来选择请求方式就好了。