修炼js 8 发起http请求的方式

前言

近两天在公司写登录的时候发现我居然快忘记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);
            })
        })
    }
}

总结

虽然现在请求的方式那么多，但是还是需要根据项目来选择适合的方式，避免项目体积变得庞大，当然个人项目就没必要考虑这么多的东西，看自己个人习惯来选择请求方式就好了。