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

相关推荐
别拿曾经看以后~1 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
Devil枫7 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
GIS程序媛—椰子8 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
毕业设计制作和分享9 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果9 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄10 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰10 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式
薛一半12 小时前
PC端查看历史消息,鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js
过期的H2O212 小时前
【H2O2|全栈】JS进阶知识(四)Ajax
开发语言·javascript·ajax