原生 javascript 如何实现 ajax方法 和 axios方法
引言
发送请求对于前端来说，还是一个比较重要的知识点，尤其是在如今前后端分离的情况下。因此，在面试的小伙伴可能遇到过实现ajax和axios方法的笔试题。如果对 xhr、callback、promise不是很熟悉的小伙伴，可能一下子想不到如何实现。下面就由我带你们深入理解和轻松实现。
需要了解
下面分别对xhr，Promise， jQuery的ajax方法，axios方法做一个简单介绍，如果你对哪个部分不是很了解，可以看看那个部分。如果都了解可以跳过该章节。
使用xhr如何发送请求
发送 get请求
const xhr=new XMLHttpRequest()
// 如果服务器响应json数据，系统会帮我们解析为对象
xhr.responseType="json"
// 发送 get 请求，请求路径为 index，请求参数为 a=1，b=2
// get请求只能通过种形式传递请求参数
xhr.open("get",'/index?a=1&b=2')
xhr.send() // 开始发送请求
xhr.onreadystatechange=()=>{ // 接收到服务器响应时的回调
if(xhr.readyState==4)
{
if(xhr.status>=200&&xhr.status<300) //服务器响应 ok时
{
console.log(xhr.response)
}
else // 服务器响应 err 时
{ }
}
}
发送 get以外的请求，即可以携带请求体参数的请求
const xhr=new XMLHttpRequest()
xhr.responseType="json"
// xhr.open("put",'/index')
xhr.open("post",'/index')
//需要携带请求体参数的请求必须在请求头设置请求参数的数据类型，而且下面传请求体参数时也要对应过来
xhr.setRequestHeader('Content-Type',"application/json")
xhr.send(JSON.stringify({a:1})) //传入请求体参数，对应上面的json类型
xhr.onreadystatechange=()=>{
if(xhr.readyState==4)
{
if(xhr.status>=200&&xhr.status<300)
{
console.log(xhr.response)
}
else
{ }
}
}
promise 的基本使用
new Promise((rel,rej)=>{rel('success')})
.then((res)=>{}) // 上面调用rel时 进入的回调
.catch((err)=>{}) // 上面调用 rej时 进入的回调
使用ajax方法如何发送请求
ajax({
//method:'get'
method:'post', // 请求方式
url:'http://localhost:5000/add', // 请求路径
data:{name:'d',price:40,desc:'xxx'}, // 请求参数
success:(res)=>{console.log(res)}, // 后台响应ok 后的回调，res是响应结果
error:(err)=>{console.log(err)} // 后台响应err 后的回调，err是响应结果
})
使用axios如何发送请求
axios({ // 发送 get 请求
url:'/user',
params:{id:6,name:'f',age:18}
})
.then((res)=>{console.log(res.data)})
.catch((err)=>{})
axios({ // 发送 post 请求
url:'/user',
method:'post',
data:{id:6,name:'f',age:18}
})
.then((res)=>{console.log(res.data)})
.catch((err)=>{})
实现 ajax方法
思路其实很简单，上面也可以看到post请求和get请求传递请求参数的方式有点差异，在这里我们只需要对各种情况做不同的处理即可。然后就是在服务器响应ok或者err时，分别在success和error callback中接收结果，在这里我们只需要在不同的响应情况下执行不同的callback即可。下面来看代码实现，你就会更加清晰的理解。
function ajax({method='get',url='',
data={},success=(res)=>{},error=(err)=>{}}) {
// 如果为get请求 且需要 携带请求参数时
if(method.toLocaleLowerCase()==='get' && Object.keys(data).length!==0)
{ // 把用户传递的参数对象解析为 urlencoded形式
url=url+'?'
for(let [k,v] of Object.entries(data)) { url+=`${k}=${v}&` }
url=url.substr(0,url.length-1)
// console.log(url)
}
const xhr=new XMLHttpRequest()
xhr.responseType='json'
xhr.open(method,url)
// 无论哪种请求，加上这个请求头总没事
xhr.setRequestHeader('Content-Type','application/json')
// 除了上面的情况，都可以把请求参数在这里传递
xhr.send(JSON.stringify(data))
xhr.onreadystatechange=function(){
if(xhr.readyState===4){
const res=xhr.response
// 服务器响应 ok 时，我们调用 用户传进来的 success回调
if(xhr.status>=200&&xhr.status<300) success(res)
// 服务器响应 err 时，我们调用 用户传进来的 err回调
else error(res)
}}}
实现 axios 方法
实现思路其实也很简单，对于请求参数传递方式的处理和ajax处是一样的。然后对与回调的处理其实也和ajax处是基本一样的，只不过一个是 promise，一个是callback。最后要注意的是，方法需要返回一个promise。
function axios({method='get',url='',data={}}){
return new Promise((rel,rej)=>{
if(method.toLocaleLowerCase()==='get'&&
Object.keys(data).length!==0)
{
url=url+'?'
for(let [k,v] of Object.entries(data)) { url+=`${k}=${v}&` }
url=url.substr(0,url.length-1)
console.log(url)
}
const xhr=new XMLHttpRequest()
xhr.responseType='json'
xhr.open(method,url)
xhr.setRequestHeader('Content-Type','application/json')
xhr.send(JSON.stringify(data))
xhr.onreadystatechange=function(){
if(xhr.readyState===4){
const res=xhr.response
if(xhr.status>=200&&xhr.status<300) rel({data:res})
else rej(res)
}}
})
}
结尾
看到这里，相信你对xhr和 如何发送请求一定有了一个很好的理解。感谢你的观看，希望这篇文章能给你带来快乐。如果有小伙伴有一些问题或者疑惑，欢迎提出和分享。