javascript：简单手写原生js接口请求，类似ajax

function myAjax (params) {
  return new Promise((resolve, reject) => {
    if (!params.url) {
      console.log('url不能为空')
    }
    let request = null; 
    if(window.XMLHttpRequest){ 
      request=new XMLHttpRequest();
    }else{
      request=new ActiveXObject("Microsoft.XMLHTTP");
    }
    // get请求，拼接参数在url后面
    if (params.method && params.method.toLowerCase() === 'get' || !params.method) {
      let data = ''
      for (const key in params.data) {
        data ? data += `&${key}=${params.data[key]}` : data = `?${key}=${params.data[key]}`
      }
      params.url = params.url + data
    }
    
    request.open(
      params.method?params.method:'get',
      params.url,
      params.async ? params.async : true
    ); 
    /*********** 配置请求头 ************/
    /*********** setRequestHeader必须写在open和send中间  ************/

    request.setRequestHeader("accept", "application/json, text/plain, */*");
    // params附带其他请求头
    let hasContentType = false
    for (const key in params.headers) {
      request.setRequestHeader(key,params.headers[key]);
      if (key.toLowerCase() === 'content-type') {
        hasContentType = true
      }
    }
    // get请求
    if (params.method && params.method.toLowerCase() === 'get' || !params.method) {
      hasContentType ? '': request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    } else {
      if (!params.file) { // 非文件上传的其他请求
        hasContentType ? '': request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
      }
    }
    /*********** end 配置请求头 ************/
    if (params.file) { // 文件数据
      request.send(params.file);
    } else{ // 一般数据
      request.send(JSON.stringify(params.data) || null);
    }
    

    request.onreadystatechange = () => {
      if(request.readyState === 4){
        if(request.status === 200){
          resolve(JSON.parse(request.responseText));
        } else{
          reject(JSON.parse(request.responseText));
        }
      }
    }
  })
}

使用

  <input type="file" id="file"/>
  <div id="send" class="btn">上传</div>
  <div id="get" class="btn">get</div>
  <div id="post" class="btn">post</div>


  <script src="./js/ajax.js" ></script>
  <script>
    document.getElementById('send').onclick  =() =>  {
      let data  = document.getElementById('file').files[0]
      let file = new FormData()
      file.append('file', data);
      let params = {
          url:'https://******/uploadImage',
          method:'post',
          file:file,
          headers:{
            "Authorization":"bearer",
            "version":"3.2.0"
          }
        }
      myAjax(params).then(res => {
          console.log(res)
        }).catch(res=>{
          console.log(res)
        })      
    }
    document.getElementById('get').onclick  =() =>  {
      let params = {
          url:'https://******',
          method:'get',
          data: {
            platform:'h5'
          },
          headers:{
            "Authorization":"bearer",
            "version":"3.2.0"
          }
        }
      myAjax(params).then(res => {
          console.log(res)
        }).catch(res=>{
          console.log(res)
        })      
    }
    document.getElementById('post').onclick  =() =>  {
      let params = {
          url:'https://******',
          method:'post',
          data: {
            platform: 'h5'
          }
        }
      myAjax(params).then(res => {
          console.log(res)
        }).catch(res=>{
          console.log(res)
        })      
    }
  </script>

url：请求地址
methods：请求方法，默认get
data：请求数据，文件上传使用file
file：需要上传的FormData文件
headers：请求头