axios delete传参_Vue开发问题（axios封装）

最新推荐文章于 2024-08-31 18:02:41 发布
最新推荐文章于 2024-08-31 18:02:41 发布
阅读量943 收藏 1
点赞数
文章标签： axios delete传参 axios get传参 axios post json axios post传参 axios封装 axios拦截器

b04dd5b3b24ddb8efbfb0c850edde3c2.png

关于Vue开发的问题（axios封装）

在博客中查找vue的axios封装，发现其中案例还是很多的，自己项目中有些需求不够。
比如
1、Content-Type 请求头 application/x-www-form-urlencoded和application/json两种方式的应用
2、请求方式增加delete方式，
3、出现跨域，以及其他问题。
做了些修改。做个记录

首先放出引用的源代码

引用来源于 vue axios 封装 全局调用axios
感谢 爱吃排骨 给予的帮助

import axios from "axios"
import qs from "qs"
axios.defaults.timeout=3000   //响应时间
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';        //配置请求头
axios.defaults.baseURL =process.env.NODE_HOST;   //配置接口地址
console.log(process.env)
//POST传参序列化(添加请求拦截器)
axios.interceptors.request.use((config) => {
    //在发送请求之前做某件事
    let token = sessionStorage.getItem('access_token') || ""  //获取token 
    console.log(token)
    if (token!="") {
        config.headers = {
         'access-token': token,
         'Content-Type': 'application/x-www-form-urlencoded'
        }
    }    
    if(config.method  === 'post'){
        config.data = qs.stringify(config.data)//序列化post 参数
    }
    return config;
},(error) =>{
    console.log('错误的传参')
  
    return Promise.reject(error);
});
//返回状态判断(添加响应拦截器)
axios.interceptors.response.use((res) =>{
    //对响应数据做些事
    if(!res.data.success){
        let newToken=res.data.token    //成功后更新token 
        localStorage.setItem('access_token', newToken)
    }
    return res;
}, (error) => {
      if(error.response.data.status=='401'){    //如果token 过期 则跳转到登录页面
        this.$router.push('/login');
      }
    return Promise.reject(error);
});
//返回一个Promise(发送post请求)
 function post(url, params) {
    return new Promise((resolve, reject) => {
        axios.post(url, params)
            .then(response => {
                resolve(response);
            }, err => {
                reject(err);
            })
            .catch((error) => {
                reject(error)
            })
    })
}
//返回一个Promise(发送get请求)
 function get(url, param) {
    return new Promise((resolve, reject) => {
        axios.get(url, {params: param})
            .then(response => {
                resolve(response)
            }, err => {
                reject(err)
            })
            .catch((error) => {
                reject(error)
            })
    })
}
export default {
    get,
    post,
}

直接粘贴过去使用的问题 — 。—！

1、第4行请求头的的问题
2、第5行env文件未说明如何应用
3、第14行，token 名称的问题
4、第18行，当随意使用qs进行转序列化post参数 ，参数有时候想在body又有时候想在url的问题
5、新加delete，download下载方式
6、响应拦截器的修改

1、第4行请求头的的问题

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
这里看到他是给axios添加默认的请求头为： 'application/x-www-form-urlencoded;'本身这样写是没有错误的，但是只是默认了提交方式为表单提交，如果我们请求传输数据呢？就必须改为 'application/json'？
所以…为了能正常使用我又create另外一个axios2 
let axios2 = axios.create()
axios2.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';        //配置请求头
问题来了，万一get方式的请求头也是这，咋办，所以干脆写在请求拦截器里 
axios.interceptors.request.use((config) => {
  //在发送请求之前做某件事 //请求之前加入token
  let token = sessionStorage.getItem("token") || ""  //获取token 
  if (token != "") {
    config.headers = {
      'authorization': token, //写自己后端传回来的token的命名，本项目为 authorization，
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  }
  if (config.method === 'post') {
    config.data = qs.stringify(config.data)//序列化post 参数
  }
  return config;
}, (error) => {
  console.log('错误的传参')
  return Promise.reject(error);
});
axios2.interceptors.request.use((config) => {
  //     //在发送请求之前做某件事 //请求之前加入token
  let token = sessionStorage.getItem("token") || ""  //获取token 
  if (token != "") {
    config.headers = {
      'authorization': token, //写自己后端传回来的token的命名，本项目为 authorization，
      'Content-Type': 'application/json;charset=UTF-8'
    }
  }
  return config;
}, (error) => {
  console.log('错误的传参')
  return Promise.reject(error);
});
对！只有 axios、 axios2，以及 'Content-Type'发生变化，是不是感觉繁琐了很多，没错！但是胜在能用么，如果这个地方写不对，请求会报400，参数错误。稍后我会放出完整版的，需要的直接拉到最下面吧
那么在下面封装get，或者post 的时候，只需要使用两个不同的axios就行。举例： 
//返回一个Promise(发送post请求：'Content-Type'为form方式)
function post(url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, params)
      .then(response => {
        resolve(response);
      }, err => {
        reject(err);
      })
      .catch((error) => {
        reject(error)
      })
  })
  //返回一个Promise(发送post请求：'Content-Type'为json方式)
function jsonpost(url, params) {
  return new Promise((resolve, reject) => {
    axios2.post(url, params)
      .then(response => {
        resolve(response);
      }, err => {
        reject(err);
      })
      .catch((error) => {
        reject(error)
      })
  })
}
有点流水账的意思，还是那句话。。。。。当时能用就行

2、第5行env文件未说明如何应用

这个请参考我的其他博客《Vue开发问题——打包后首页白屏》

3、第14行，token 名称的问题

排骨老哥不地道（可能是我实在太菜），token名称是后端定的，得随时改，所以下面这个地方： 'access-token'，得换成自己后端的token名称，在1问题中，我封装的拦截器，我的项目里名称是叫 authorization' 
if (token!="") {
        config.headers = {
         'access-token': token,
         'Content-Type': 'application/x-www-form-urlencoded'
        }
    }

4、第18行，当随意使用qs进行转序列化post参数 ，参数有时候想在body又有时候想在url的问题

细心的小伙伴可能发现了，我在封装两种请求拦截器的时候axios，比axios2多了亿点点内容 
if (config.method === 'post') {
    config.data = qs.stringify(config.data)//序列化post 参数
  }
所以如果在 'application/json'模式下，后端本来设置是在body中获取数据，那么你再qs去转换下，那么等你的就只有400

5、新加delete，download下载方式

直接上代码 
function deletefn(url, params) {
  return new Promise((resolve, reject) => {
    axios.delete(url+[params])
      .then(response => {resolve(response)},err => {reject(err)})
      .catch(err => {
        reject(err)
    })
  });
}

function download(url, params) {
  return new Promise((resolve, reject) => {
    axios2.post(url, params, {responseType: 'blob'})
      .then(response => {
          resolve(response);
      }, err => {
        reject(err);
      })
      .catch((error) => {
        reject(error)
      })
  })
}
这里注意了，删除的方式我是 axios.delete(url+[params])，你们看自己后台的接口，可能会是 axios.delete(url+'/'+[params])，这个 / 你们自己把握 [/滑稽]
至于下载请求嘛，是项目中一个导出列表信息的功能，具体请参考我的其他博客《vue开发问题——导出文本流》

6、响应拦截器的修改

axios.interceptors.response.use((res) => {
    // 对响应数据做些事
  if (res.data&&res.data.code&&res.data.code == 401) {
    console.log(this);
    router.push('/');
  }
  return res;
});
作用是如果返回码401（无权限，或session过期）我就利用router去跳转到登录页
原博主设置的是如果登录的成功，就更新token，我这项目不需要，所以就偷个懒，有需要的可以自己试一试
这里有个小插曲，再这里引用router 必须是 ../ 比如： 
import router from "../router"
最后记得自己封装的方法要 export 导出哦~
下面是我完整的代码，另外，还会附上axios封装简化版解决上述的 'Content-Type'问题 
import axios from "axios"
import qs from "qs"
import router from "../router"

let axios2 = axios.create()
axios.defaults.timeout = 7000   //响应时间
axios2.defaults.timeout = 7000
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';        //配置请求头
axios.defaults.baseURL = process.env.VUE_APP_BASE_API;   //配置接口地址根目录
axios2.defaults.baseURL = process.env.VUE_APP_BASE_API;
// //POST传参序列化(添加请求拦截器)
axios.interceptors.request.use((config) => {
  //在发送请求之前做某件事 //请求之前加入token
  let token = sessionStorage.getItem("token") || ""  //获取token 
  if (token != "") {
    config.headers = {
      'authorization': token, //写自己后端传回来的token的命名，本项目为 authorization，
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  }
  if (config.method === 'post') {
    config.data = qs.stringify(config.data)//序列化post 参数
  }
  return config;
}, (error) => {
  console.log('错误的传参')
  return Promise.reject(error);
});
// 返回状态判断(添加响应拦截器)
axios.interceptors.response.use((res) => {
//   //对响应数据做些事
  if (res.data&&res.data.code&&res.data.code == 401) {
    router.push('/');
  }
  return res;
});

axios2.interceptors.request.use((config) => {
  //     //在发送请求之前做某件事 //请求之前加入token
  let token = sessionStorage.getItem("token") || ""  //获取token 
  if (token != "") {
    config.headers = {
      'authorization': token, //写自己后端传回来的token的命名，本项目为 authorization，
      'Content-Type': 'application/json;charset=UTF-8'
    }
  }
  return config;
}, (error) => {
  console.log('错误的传参')
  return Promise.reject(error);
});

axios2.interceptors.response.use((res) => {
    // 对响应数据做些事
  if (res.data&&res.data.code&&res.data.code == 401) {
    router.push('/');
  }
  return res;
});
//返回一个Promise(发送请求头为application/json的post请求)
function jsonpost(url, params) {
  return new Promise((resolve, reject) => {
    axios2.post(url, params)
      .then(response => {
        resolve(response);
      }, err => {
        reject(err);
      })
      .catch((error) => {
        reject(error)
      })
  })
}

function jsonget(url, params) {
  return new Promise((resolve, reject) => {
    axios2.get(url, params)
      .then(response => {
        resolve(response);
      }, err => {
        reject(err);
      })
      .catch((error) => {
        reject(error)
      })
  })
}


function jsondelete(url, params) {
  return new Promise((resolve, reject) => {
    axios2.delete(url, {data:params})
      .then(response => {
        resolve(response);
      }, err => {
        reject(err);
      })
      .catch((error) => {
        reject(error)
      })
  })
}


//返回一个Promise(发送post请求)
function post(url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, params)
      .then(response => {
        resolve(response);
      }, err => {
        reject(err);
      })
      .catch((error) => {
        reject(error)
      })
  })
}
返回一个Promise(发送get请求)
function get(url, param) {
  return new Promise((resolve, reject) => {
    axios.get(url, { params: param })
      .then(response => { resolve(response) }, err => { reject(err) })
      .catch((error) => { reject(error) })
  })
}
function deletefn(url, params) {
  return new Promise((resolve, reject) => {
    axios.delete(url+[params])
      .then(response => {resolve(response)},err => {reject(err)})
      .catch(err => {
        reject(err)
    })
  });
}

function download(url, params) {
  return new Promise((resolve, reject) => {
    axios2.post(url, params, {responseType: 'blob'})
      .then(response => {
          resolve(response);
      }, err => {
        reject(err);
      })
      .catch((error) => {
        reject(error)
      })
  })
}


export default {
  get,
  post,
  deletefn,
  jsonpost,
  jsonget,
  jsondelete,
  download
}
简化版 
function requset(config){
    return new Promise((resolve,reject)=>{
      axios({
        url:config.url,
        method:config.method,
        headers:{
          'authorization': config.token||'', //写自己后端传回来的token的命名，本项目为 authorization，
          'Content-Type': 'application/json'||config.headers.Content-Type
        },
        params:config.params
      }).then(res=>{
        resolve(res)
      }).catch(err=>{
        reject(err)
      })
    })
  }
其他地方调用 
LoginInternet2(){
      this.$ajax.requset({
        url:"/login",
        method:"post",
        headers:{
          "Content-Type":"application/x-www-form-urlencoded"
        },
        params:this.params
      }).then(res =>{
        console.log(res);
      }).catch(err => {
        console.log(err);
      })
    },
'authorization': config.token||'', 表示如果传入就是使用传入的token，没传就不写，其实这里还可以做个简化的，直接添加拦截器就都解决了。 'Content-Type': 'application/json'||config.headers.Content-Type 这个表示如果没穿就是默认json，传入就使用传入的
下面的案例为了方便，参数我就直接写再方法里了，一般是应该在data里面定义config:{…}，去传参数的。我懒嘛~
更新（其实是打错了）————————————————————————————————
第1个问题里，上面写的我为了创建axios2.去使用 application/json 请求头 但是，axios少个2，后面的请求头也打错了 。。囧，原文已经更改了 
let axios2 = axios.create()
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';        //配置请求头

帮到你的话，点个赞吧d=====(￣▽￣*)b

原作者姓名：Lazy33
原出处：CSDN
原文链接：Vue开发问题（axios封装）_Lazy33的博客-CSDN博客
weixin_39969340
关注
Vue中 axios delete请求参数
qq_43919485的博客
08-19 3828
post和put有三个参数，url,data和config，所以在使用这两个时， 可以写成axios.post(api,{id:1}),axios.put(api,{id:1}), 但是delete只有两个参数：url和config，data在config中， 所以需要写成 axios.delete(api,{data:{id:1}}) 如果是服务端将参数当作对象来封装接收则 参数格式为：{data: param} var param={id:1,name:'zhangsan'}
axios delete方法 php,Vue中 axios delete请求参数操作
weixin_39827905的博客
03-12 1031
vue中axios 的delete和post,put在传值上有点区别post和put有三个参数，url,data和config，所以在使用这两个时，可以写成axios.post(api,{id:1}),axios.put(api,{id:1}),但是delete只有两个参数：url和config，data在config中，所以需要写成 axios.delete(api,{data:{id:1}})...
Vue中 axios delete请求参数操作
01-21
vue中axios 的delete和post,put在传值上有点区别 post和put有三个参数，url,data和config，所以在使用这两个时，可以写成axios.post(api,{id:1}),axios.put(api,{id:1}),但是delete只有两个参数：url和config，data在config中，所以需要写成 axios.delete(api,{data:{id:1}}) 如果是服务端将参数当作Java对象来封装接收则 参数格式为： {data: param} var param={id:1,name:'zhangsan'} this.$axios.delet
Vue axios delete 415
html标签-meta
05-07 655
axios.delete('/api',{data:{id:1}}) axios 的delete 方法与post、put不一样，要用data包裹一层，原理是delete第二个参数是config的data不是单纯的data 参考于：https://blog.csdn.net/qq383366204/article/details/80268007 ...
axios中delete传参的两种方式及对应的接收方式
最新发布
weixin_41925271的博客
08-31 551
1 前端 多参数 （请求参数）一 、axios自动拼接到url后。
vue axios delete方式发送数组对象及后端接收方式
u013263186的博客
03-02 1126
【代码】vue axios delete方式发送数组对象及后端接收方式。
axios队列 vue_(十三 )Vue 封装axios(四种请求)及相关介绍
weixin_29102619的博客
01-17 285
Vue 封装axios(四种请求)及相关介绍首先axios是基于promise的http库promise是什么？1、主要用于异步计算2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果3、可以在对象之间传递和操作promise，帮助我们处理队列一.首先安装axiosnpm install axios; // 安装axios二.引入axios我是根据网上学习的，在目录下新建一个文件夹，新...
react + ts or vue + ts 通用axios封装的方法。
07-21
本篇文章将深入探讨如何在React+TS或Vue+TS项目中对axios进行通用封装，以便更好地管理API请求。 首先，我们了解下什么是axios。Axios是一个基于Promise的HTTP库，它可以在浏览器和node.js中使用。它具有丰富的特性...
vue.cli项目封装全局axios，封装请求，封装公共的api和调用请求的全过程
热门推荐
JCat的博客
09-03 10万+
vue项目的前期配置 封装axios实例 封装API
vue axios使用delete方法传参
weixin_44994372的博客
10-23 5456
axios有增删改查，相对应的有post,delete,patch,get方法，接下来就来记录下用delete方法遇到的坑1.封装axios2.api.js 1.封装axios import Vue from 'vue' import axios from 'axios' import { Message, Loading } from 'element-ui' import Cookies fr...
vue 对axios get pust put delete封装的实例代码
11-27
axios.js import axios from 'axios'; import Qs from 'qs'; import {Message} from 'element-ui'; axios.defaults.baseURL = "/api"; // 设置请求超时时间 axios.defaults.timeout = 30000; // 设置post请求头 axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'; // 请求拦截 axios.interceptors.request.u
vue 中使用axios 的delete方式提交数组
ZHH1015的博客
11-05 4191
vue 中使用axios 的delete方式提交数组axios 各方法提交参数源码params 参数类型提交data参数类型提交 在使用axios的delete提交数组时，要注意，提交参数有区别于post axios 各方法提交参数源码 注意看，delete 请求时只有两个参数，第二个是config，而post的第二个参数是data，所以不能用post提交的方式提交。 在看一下config 注意着里面的params 和data，这个是重点，就是要提交的参数 params 参数类型提交 params 提交
axios实例 delete方法的传参方式
qq_42793336的博客
09-01 719
axios实例 delete方法的传参方式
axios常见传参方式get/post/put/patch/delete
hh3167253066的博客
09-03 1734
因为axios中包含es6的语法，须要支持ES6 Promise实现。 若是您的环境不支持ES6 Promise，您能够使用polyfill。javascript（能够使用 import “babel-polyfill” ） axios官方地址 开发过程当中，常常须要全局设置，许多前端开发时容易忽略请求头的配置，经常使用的请求头有2种： axios.defaults.timeout = 15000; //超时响应 axios.defaults.headers.post['Content-Type'] =
axios中参数传递的误区：delete, get 必须把参数直接整合到url中
xplidelphi的专栏
07-23 833
axios服务调用参数传递的时候，delete, get必须把参数直接整合到url中，否则服务端收不到。
Vue如何封装常用axios请求(get,post,put,delete)，后续方便使用
Karse_的博客
04-01 3635
注：get和delete是在路径中传递数据，而post和put可以在request body中传递数据。【按需】加入请求认证信息和报错响应，这里我加入的是jwt认证。在组件中使用封装好的请求，直接this.方法名就可以调用。在main.js中引入封装的四个方法。在src下新建api/api.js。
Vue axios delete请求传参（数组）问题
Alice_hhu的博客
06-04 8688
问题现象： vue项目使用 axios发送 delete请求，传入的params参数是数组，浏览器解析出来的数据格式[]位置比较奇怪。 解决方法： 使用 qs插件对参数做序列化。 import qs from 'qs' export const customRequest = (params) => { return axios.request({ url: `xxx url`, method: 'delete', params, // 重点在这里 paramsSerializ
Vue中axios请求的封装与使用详解
"Vue.js 中的 Axios 请求封装代码实例" 在 Vue.js 开发过程中，Axios 是一个常用的 HTTP 库，它基于 Promise，支持在浏览器和 Node.js 环境中使用。Vue 官方推荐使用 Axios 进行 HTTP 请求管理。为了提高代码的可...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值