封装ajax

ajax.js

/*
封装ajax的逻辑
  1 对参数的验证
    必填参数的验证
    选填参数的格式验证
  2 设置参数的默认值
  3 发送ajax请求信息
*/
function ajax(options={}){
  // 1 对参数进行验证
    // 1.1 url必填
    if(!options.url){
      throw Error('url必须填写')
      // 无需写return,报错会中断程序执行
    }
    // 1.2 method 可以不填,填写了必须是post或者get
    if(!(options.method === undefined || /^(get|post)$/i.test(options.method))){
      throw Error('请求方式错误,目前只支持post或者get请求')
    }
    // 1.3 async 可以不填,填写了必须是布尔值
    if(!(options.async === undefined || typeof options.async === 'boolean')){
      throw Error('async必须是布尔值')
    }
    // 1.4  data 可以不填,填写了必须是对象 携带给后端的数据
    if(!(options.data === undefined || Object.prototype.toString.call(options.data) === '[object Object]')){
      throw Error('携带的data数据必须是对象类型')
    }
    // 1.5  headers 可以不填,填写了必须是对象
    if(!(options.headers === undefined || Object.prototype.toString.call(options.headers) === '[object Object]')){
      throw Error('headers必须是对象类型')
    }
  //2 设置参数的默认值
    let info = {
      url: options.url,
      method: options.method || 'get',
      data: options.data || {},
      async: typeof options.async === 'boolean'?options.async : true,
      headers:{'content-type':'application/x-www-form-urlencoded',...options.headers},
      dataType: options.dataType || 'string',
      success:options.success || (()=>{}),
      error:options.error || (()=>{})
    }
    // 2.1 对info中的内部信息做调整
    // data是一个对象,在ajax请求的时候,需要把这个对象转为一个查询字符串
    let str = ''
    for(const key in options.data){
      str += `${key}=${info.data[key]}&`
    }
    info.data = str.slice(0,-1)
    // 根据method请求方式,拼接url
    if(/^get$/i.test(info.method) && info.data){
      info.url += `?${info.data}`
    }
    // console.log(info);
  // 3 发送ajax请求
    let xhr = new XMLHttpRequest()
    xhr.open(info.method,info.url,info.async)
    xhr.onload = function(){
      // 根据info.dataTyp的值决定要不要对后端返回的值进行解析
      let res = info.dataType === 'string' ? xhr.responseText : JSON.parse(xhr.responseText)
      info.success(res)
    }
  // 设置请求头信息
    for(let key in info.headers){
      xhr.setRequestHeader(key,info.headers[key])
    }
    if(/^get$/i.test(info.method)){
      xhr.send()
    }else{
      xhr.send(info.data)
    }
}

ajax调用.html

<script src="./封装ajax的参数验证.js"></script>
  <script>
    window.onload = function(){
      /*
      封装ajax
      设计哪些参数
        1 请求地址 url 必填 没有默认值
        2 请求方式 method 必填 默认值get
        3 携带给后端的数据 data 选填 {}
        4 是否异步 async 选填 tru表示异步
        5 是否解析后端返回的数据 dataType 选填 默认值string不执行JSON.parse() 选填json要执行JSON.parse()
        6 请求头信息 header 选填 默认值{'content-type','application/x-www-form-urlencoded'}
        7 执行成功后的函数 success 选填 默认值是一个空函数
        8 执行失败后的函数 error 选填 默认值是一个空函数
      设计函数的参数形式
        1 function ajax(url,method='get',async=true,data={}){}
        2 function ajax(options={})
      */
     ajax({
       url:'http://localhost:8888/test/third',
       method:'get',
       fataType:'json',
       async:true,
       data:{name:'kk',age:18},
       success(res){
         console.log('请求成功');
         console.log(res);
       },
       error(err){
         console.log(err);
       },
       headers:{authorization:'kkee'}
     })
    }
  </script>