【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不用传就行

相关推荐
星星会笑滴14 分钟前
vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库
vue.js·excel·express
Backstroke fish36 分钟前
Token刷新机制
前端·javascript·vue.js·typescript·vue
临枫54137 分钟前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
RAY_CHEN.38 分钟前
vue3 pinia 中actions修改状态不生效
vue.js·typescript·npm
酷酷的威朗普38 分钟前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5
_Legend_King1 小时前
vue3 + elementPlus 日期时间选择器禁用未来及过去时间
javascript·vue.js·elementui
景天科技苑1 小时前
【vue3+vite】新一代vue脚手架工具vite,助力前端开发更快捷更高效
前端·javascript·vue.js·vite·vue项目·脚手架工具
小行星1251 小时前
前端预览pdf文件流
前端·javascript·vue.js
join81 小时前
解决vue-pdf的签章不显示问题
javascript·vue.js·pdf
小行星1251 小时前
前端把dom页面转为pdf文件下载和弹窗预览
前端·javascript·vue.js·pdf