原生 ajax

Posted 2022-02-11 auserroot

Ajax

原生写法

// ajax
// 步骤：创建 ajax 实例 
 let xhr = new XMLHttpRequest()
 console.dir(xhr) //打印 xhr 对象
 let res = undefined // 保存响应
 //  建立链接
 // xhr.open(method,url,isasync)//方法 地址 是否异步
 xhr.open('get','./1.json',true) //get 请求
 //设置请求头
 //xhr.setRequestHeader(header,value) //可自定义 默认 '*/*'
 xhr.setRequestHeader('Access-Control-Allow-Origin','*')
 
 xhr.timeout = 1000 //设置请求超时时长 可不设置 (仅异步请求支持)
 //监听状态变化
 xhr.onreadystatechange = ()=>
  //获取状态 
  if(xhr.readyState === 4)
    xhr.status >= 200 && xhr.status <= 300&&(res = xhr.responseText ,console.log(res)) 
  
 

//请求完成处理
xhr.onload = (res)=>
	console.log(res)

//请求超时处理
xhr.ontimeout = ()=>
	console.log('超时')

//发送 请求
xhr.send()

//终止请求
//xhr.abort()

promise 写法：

//定义 ajax 给定参数 请求方法 请求地址
const _ajax = (method,url)=>
//创建 promise 实例
  let req = new Promise((reslove,reject)=>
  //接下来是原生 ajax 操作
    let xhr = new XMLHttpRequest()
    xhr.open(method,url)
    xhr.onreadystatechange = ()=>
      if(xhr.readyState === 4)
        xhr.status >=200 && xhr.status <300 ? reslove(xhr.responseText) : reject(xhr.responseText?xhr.responseText:'error')//请求成功 将响应给 reslove 失败 则给 reject （若失败无响应则直接抛错或给出响应提示）
      
    
    xhr.send()//发送请求
  )
  return req //返回promise实例


//测试
_ajax('get','./1.json').then((res)=>
  console.log(res)
).catch((reason)=>
  console.log(reason)
)

注意：

• 请求外域 需做跨域处理
• 请求可能触发 302 重定向 会导致部分请求无法正常获取响应 需要做拦截
• 关于违反同源策略导致跨域 解决方法有很多 常用的一般就是 nginx 反向代理、 jsonp 、ws协议（webSocket）等 前端方法，后端常用的是添加允许跨域的请求头