修炼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); }) }) } }

总结

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