AJAX 封装及使用

封装代码

模仿axios对ajax进行了封装，以下是源码

let xmlConfig = {
  baseURL: "",
  Headers: {'Content-Type': 'application/json'},
  timeout: 10000
}

//ajax 请求调用
function ajaxHttpRequestFunc(method, url, data) {
  let xmlHttpRequest;
  if (window.ActiveXObject) {
    xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
  } else if (window.XMLHttpRequest) {
    xmlHttpRequest = new XMLHttpRequest();
  }

  let p1 = new Promise((resolve, reject) => {
    xmlHttpRequest.onreadystatechange = () => {
      // console.log('请求过程', xmlHttpRequest.readyState);
      if (xmlHttpRequest.readyState == 4) {
        // console.log('状态码为', xmlHttpRequest.status);

        if (xmlHttpRequest.status >= 200 && xmlHttpRequest.status < 300) {
          let responseText = "";
          if (xmlHttpRequest.responseText) {
            responseText = JSON.parse(xmlHttpRequest.responseText)
          }
          resolve(responseText)
        } else {
          // console.log(xmlHttpRequest, "xmlHttpRequest")
          let errData = {
            status: xmlHttpRequest.status,
            statusText: xmlHttpRequest.statusText,
            statusCode: `${xmlHttpRequest.status} ${xmlHttpRequest.statusText}`
          }
          reject(errData)
        }
      }
    }
    setTimeout(() => {
      let errData = {
        statusCode: `请求超时!`
      }
      reject(errData)
    }, xmlConfig.timeout);

  })

  xmlHttpRequest.open(method, url, true);
  if (xmlConfig.Headers) {
    for (let item in xmlConfig.Headers) {
      xmlHttpRequest.setRequestHeader(item, xmlConfig.Headers[item]);
    }
  }
  xmlHttpRequest.send(data);
  return p1;
}

// 回调函数定义
let interceptorsRequestfn: any = null
let interceptorsFulfilled: any = null
let interceptorsRreject: any = null

// url地址拼接
function getUrl(baseUrl, path){
  let url = path;
  if(baseUrl){
    url = baseUrl + url;
    url = url.replaceAll("//", "/")
    url = url.replace(":/", "://");
  }
  return url;
}

// params参数拼接
function getUrlParams(url, params) {
  let queryStr = "";
  if (params) {
    let paramsArr = []
    for (let i in params) {
      paramsArr.push(`${i}=${params[i]}`);
    }
    queryStr = paramsArr.join("&")
  }
  if (queryStr) {
    url += `?${queryStr}`
  }
  return url;
}

//data  数据拼接
function getDataJson (data) {
  let dataStr = "";
  if (data) {
    dataStr = JSON.stringify(data)
  }
  return dataStr;
}


// 定义Axios 函数
let Axios = function () {
  return function (config) {
    if(!config.Headers){
      config.Headers = {}
    }
    if (interceptorsRequestfn) {
      interceptorsRequestfn(config);
    }
    if (config.Headers) {
      for (let item in config.Headers) {
        xmlConfig.Headers[item] = config.Headers[item]
      }
    }
    let url = getUrl(xmlConfig.baseURL, config.url);
    url = getUrlParams(url, config.params);
    let dataJson = getDataJson(config.data);
    if (config.method == "get" || config.method == "delete") {
      dataJson = null;
    }
    return ajaxHttpRequestFunc(config.method, url, dataJson).then(response => {
      if(interceptorsRequestfn){
        let responsedata = interceptorsFulfilled(response)
        response = responsedata ? responsedata : response
      }
      return response
    }).catch(err => {
      if(interceptorsRreject){
        let errdata = interceptorsRreject(err);
        err = errdata ? errdata : err
      }
      return Promise.reject(err)
    })
  }
}

// 接收请求拦截钩子
function interceptorsRequest(fn) {
  if (fn) {
    interceptorsRequestfn = fn;
  }
}

// 接收响应拦截钩子
function interceptorsResponse(onFulfilled, onRreject) {
  if(onFulfilled) {
    interceptorsFulfilled = onFulfilled;
  }
  if(onRreject){
    interceptorsRreject = onRreject
  }
}

// 对外开放的对象
let axios = {
  defaults: {
    Headers: {}
  },
  create(config) {
    xmlConfig.baseURL = config.baseURL ? config.baseURL : "";
    xmlConfig.timeout = config.timeout ? config.timeout : 10000;
    xmlConfig.Headers = Object.assign(xmlConfig.Headers, this.defaults.Headers);
    let axiosObj = Axios();
    axiosObj.__proto__.interceptors = {
      request: interceptorsRequest,
      response: interceptorsResponse,
    }
    return axiosObj;
  },
}


export default axios

项目调用封装

import axios from "@/views/home/api";

axios.defaults.Headers['Content-Type'] = 'application/json;charset=utf-8';

let service = axios.create({
  baseURL: "http://localhost/api/",
  timeout: 10000
});

//请求拦截
service.interceptors.request((config) => {
  if(config.Headers){
    config.Headers = {};
  }
  config.Headers['Authorization'] = "Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImM5ZjA2Y2MwLTQwZTAtNDAwOC05ODE2LWFjMDQ3ODQ4NTYzMSJ9.T24NZofFxRUeYbTUtIHdMgp1tEpgnaTJeIqBnKPd-iSXSN7_NVSM1vcu48K0dPvArXw5P1shuQ8vNFcbJ4GjnQ";

  return config;
})

// 响应拦截
service.interceptors.response(res => {
  console.log(res, "res112221");
  return res;
}, err => {
  console.log(err, "err112221");
  return Promise.reject(err);
})

export default service;

在业务逻辑中使用

在vue3项目中使用

<script setup lang="ts">
  import request from "./request";
  const apiData = ref()
  
  let pQuery = {
    userAge: "5",
    userDescribe: "5",
    userImg: "5",
    userInterest: "5",
    userName: "5",
  }

  function getData() {
    request({
      url: '/mall/malluser',
      method: 'post',
      data: pQuery
    }).then(response => {
      console.log(response, "数据返回");
    })
  }


</script>