封装ajax

html部分  

<script src="./itheima.js"></script>

  <script>

    //get 请求方式

    itheima({

      method: 'get',

      url: 'http://www.liulongbin.top:3009/api/get',

      params: { name: 'jack', age: 4 },

      success: function (res) {

        console.log(res);

      }

    })

    //post 请求方式

    const fd = new FormData()

    fd.append('name', 'rose')

    fd.append('age', 21)

    itheima({

      method: 'post',

      url: 'http://www.liulongbin.top:3009/api/post',

      // data: fd,

      // data: `name=rose&age=21`,

      data: { name: 'rose', age: 21 },

      success: function (res) {

        console.log(res);

      }

    })

  </script>

JS 部分

function itheima(opts) {

  // 1

  const xhr = new XMLHttpRequest()

  // 处理params

  if (opts.params) {

    //对象转换为数组，再转换为字符串

    //{name:'jack',age:18}=>['name=jack','age=18']=>name=jack&age=18

    const arr = []

    //for in 遍历数组

    for (let k in opts.params) {

      arr.push(`${k}=${opts.params[k]}`)

    }

    if (arr.length > 0) {

      opts.url = opts.url + `?${arr.join('&')}`

    }

    console.log(opts.url)

  }

  // 2 xhr.形参（方式，地址）

  xhr.open(opts.method, opts.url)

  // 处理data 判断opts.data类型是什么

  if (opts.method.toUpperCase() === 'POST' && opts.data) {

    // 处理data为formdata格式

    if (opts.data instanceof FormData) {

      xhr.send(opts.data)

    }

    // 字符串类型

    else if (typeof opts.data === 'string') {

      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

      xhr.send(opts.data)

    }

    // 对象类型

    else if (opts.data instanceof Object) {

      xhr.setRequestHeader('Content-Type', 'application/json')

      xhr.send(JSON.stringify(opts.data))

    }

  } else {

    // 3

    xhr.send()

  }

 

  // 4

  xhr.addEventListener('load', function () {

    opts.success(JSON.parse(xhr.response))

  })

}