js---封装ajax的get请求和post请求_js封装ajax请求

一、介绍：

1、函数接受一个对象配置信息，url为请求的地址，type为请求的类型，data为请求参数，success为请求成功的回调函数，fail为请求失败的回调函数

二、使用

1、当请求方式为get时，参数格式可以为：

①无参

②参数为对象：{a：1，b=2}

③参数为参数拼接的字符串格式：a=1&b=2

2、当请求方式为post时，参数格式可以为

①参数为对象：{a：1，b=2}

②参数为参数拼接的字符串格式：a=1&b=2

③参数为new FormData()

函数如下 

    function ajax({ url, type, data, success, fail }) {
      // 1.创建xhr实例对象
      const xhr = new XMLHttpRequest()
      if (type && type === 'get') {
        //请求类型为get请求
        if (data) {
          // 参数为字符串格式
          if (typeof data === 'string') {
            url += '?'
          } else if (typeof data === 'object') {
            // 参数为对象格式
            const arr = []
            //通过for in 循环将对象格式转化成a=1&b=2格式的字符串
            for (const key in data) {
              arr.push(`${key}=${data[key]}`)
            }
            url += '?' + arr.join("&")
          }
        }
        // 无参数
        // 2.配置xhr
        xhr.open(type, url)
        // 3.发送请求
        xhr.send(data)
      } else if (type && type === 'post') {
        //请求类型为post请求
        // 2.配置xhr，配置需要在设置请求头类型的前面
        xhr.open(type, url)
        if (data) {
          if (typeof data === 'string') {
            //参数时字符串类型
            xhr.setRequestHeader(
              'Content-type',
              'application/x-www-form-urlencoded'
            );
          } else if (data instanceof FormData) {
            //参数是FormData时，不需要在请求头中设置数据格式
          }
          else if (typeof data === 'object') {
            //参数为对象
            xhr.setRequestHeader('Content-type', 'application/json');
            data = JSON.stringify(data);
          }
        }
        // 3.发送请求
        xhr.send(data)
      }
 
      // 4.监听事件
      xhr.addEventListener("readystatechange", function () {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            // 请求成功
            success && success(JSON.parse(xhr.response))
          }
          else {
            // 请求失败
            fail && fail(JSON.parse(xhr.response))
          }
        }
      })
    }