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

在项目经过统一代理后,部分功能想直接发送请求,不用统一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不用传就行

相关推荐
ruanCat1 小时前
记一次因 vue-router 升级而导致的 uniapp 故障
前端·vue.js
我叫黑大帅1 小时前
面对组件的不听话,我还是用了它…………
前端·javascript·vue.js
chéng ௹1 小时前
Vue3+Ts+Element Plus 权限菜单控制节点
前端·javascript·vue.js·typescript
weixin-a153003083164 小时前
vue疑难解答
前端·javascript·vue.js
小白学大数据10 小时前
Python爬虫常见陷阱:Ajax动态生成内容的URL去重与数据拼接
爬虫·python·ajax
allk5510 小时前
OkHttp源码解析(一)
android·okhttp
allk5510 小时前
OkHttp源码解析(二)
android·okhttp
aFakeProgramer10 小时前
拆分PDF.html 办公小工具
okhttp
nueroamazing14 小时前
PPT-EA:PPT自动生成器
vue.js·python·语言模型·flask·大模型·项目·ppt
LuckySusu16 小时前
【vue篇】Vue 项目中的静态资源管理:assets vs static 终极指南
前端·vue.js