原生 javascript 如何实现 ajax方法和 axios方法

带你轻松实现 ajax方法和 axios方法

Melody_lw

1308人浏览 · 2022-04-20 20:11:04

Melody_lw · 2022-04-20 20:11:04 发布

引言

发送请求对于前端来说，还是一个比较重要的知识点，尤其是在如今前后端分离的情况下。因此，在面试的小伙伴可能遇到过实现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)
	  }}
	})
}