原生ajax封装

基于XMLHttpRequest封装ajax请求

1、封装

//新建一个request.js文件封装
//处理请求参数
function handelJson (json) {
  const arr = []
  for (let key in json) {
    arr.push(key + '=' + json[key])
  }
  const result = arr.join('&') || ''
  return result
}
//请求方法封装
function request (ajax) {
  const {method = 'get', url, data = {}} = ajax
  const http = new XMLHttpRequest() // 创建 XMLHttpRequest 对象
  switch (method.toLowerCase()) {
    case 'get':
      http.open('get', `http://127.0.0.1:8080${url}` + '?' + handelJson(data), true)
      //设置请求头
      http.setRequestHeader('Authorization', 'getToken')
      http.send(null)
      break
    case 'post':
      http.open('post', `http://127.0.0.1:8080${url}`, true)
      //设置请求头
      http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
      http.setRequestHeader('Authorization', 'token')
      //处理并发送请求参数
      http.send(handelJson(data))
      break
  }
  http.onreadystatechange = () => {
    //此处只做简单举例处理，根据实际情况处理结果
    if (http.readyState === 4) { // 已经收到所有的响应
      if (http.status === 200 || http.status === 304) {
        //请求成功
        http.success && http.success(http.responseText)
      } else {
        //请求失败
        http.error && http.error(http.status)
      }
    }
  }
}
export default request

2、使用

import request from '@/utils/request';
request({
    method:'post',
    url:'/system/menu',
    data:{
        name:'系统配置'
    },
    success:res=>{
        //do something
    },
    error:err=>{
        //do something
    }
})