【vue ajax】封装ajax，可直接复用

米老鼠的摩托车日记2024-01-26 9:52

在项目经过统一代理后，部分功能想直接发送请求，不用统一api，可以封装一个ajax进行网络传输

javascript 复制代码

    ajax(method, url, data) {
      return new Promise(function (resolve, reject) {
        const xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
          if (xhr.readyState == 4) {
            if (xhr.status == 200) {
              resolve(JSON.parse(xhr.response))
            } else {
              reject({
                code: xhr.status
              })
            }
          }
        }
        method = method.toLowerCase()
        //如果是get请求，将参数拼接到url中
        if (method == 'get') {
          const arr = []
          for (let key in data) {
            arr.push(
              key + '=' + encodeURIComponent(data[key])
            )
          }
          arr.join('&')
          url += '?' + arr.join('&')
        }


        xhr.open(method, url, true);

        xhr.setRequestHeader('Authorization', 'Bearer ' + localStorage.getItem('token'))
        //如果是post请求
        if (method == 'post') {
          xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
          xhr.send(JSON.stringify(data))
        } else {
          xhr.send();
        }
      })
    },

可以把上面函数直接放在method就可直接调用了

其中要注意post的请求头的参数要符合接口要求

如果参数是直接拼到url后面，那也可以拼接好，直接传url，data不用传就行