添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

vue axios请求方式和传参格式

在这里插入图片描述
get、delete、head请求只有两个参数,请求参数是放在第二个参数config中,post、put、patch请求有3个参数,请求参数是放在第二个参数data中的。

  1. get和delete请求,请求参数格式是query格式,参数是在url后通过“&”拼接
  • get请求,参数放在config中的params中
//接口全写请求:  url地址?id=12121&name='huahua'
//或者直接拼接在接口中写axios.get("url地址?id=12121&name='huahua'")
axios.get('url地址', {
	params: {
		id: 12121,
		name: 'huahua'
  • delete请求, 参数放在config中的data中
//接口全写请求:  url地址?id=12121&name='huahua'
//或者直接拼接在接口中写axios.delete("url地址?id=12121&name='huahua'")
axios.delete('url地址', {
	data: {
		id: 12121,
		name: 'huahua'
  1. post、put、patch的请求,请求参数是放在请求体中的(实际项目只是用到了post,其他2种没有用过)
  • post请求, 参数放在第二个参数data中
axios.post('url地址', {
		id: 12121,
		name: 'huahua'
  1. 同时发生的请求 使用axios.all和axios.spread
//axios.all([接口数组]).then(axios.spread( (接口返回数据) => {}))
mounted() {
	axios.all([this.getListOne(), this.getListTwo()]).then(axios.spread((dataOne, dataTwo) => {
	console.log(dataOne) //dataOne是接口getListOne返回的数据
	console.log(dataTwo) //dataTwo是接口getListTwo返回的数据
	}))
methods: {
	getOneList() {
		return axios.get('/getListOne')
	getTwoList() {
		return axios.get('/getListTwo')
                    vue axios请求方式和传参格式get、delete、head请求只有两个参数,请求参数是放在第二个参数config中,post、put、patch请求有3个参数,请求参数是放在第二个参数data中的。get和delete请求,请求参数格式是query格式,参数是在url后通过“&”拼接get请求,参数放在config中的params中//接口全写请求:  url地址...
				
(1)axios.defaults.headers.post['Content-Type'] = 'multipart/form-data'; 传参格式为 formData==> var formData=new FormData(); formData.append('user',123456); formData.append('pass',12345678); axios.post("/notice",formData) .then((res) => {return ..
vue3 中的传参方式和vue2中一样,都可以用query和params传参 不过注意的是,vue2 中是有this的,但是vue3是在setup中进行的,且要引入 useRoute 和useRouter router 文件夹内容不变,在你用cli 创建项目时选中就行,我这里不在展示代码,放一个图看看就好了 看下RouteView 文件的代码 about页面 不管那种方式都可以正确跳转,且得到传参参数。 我上边也有用watch 方法监听路由变化,用watch 是方便做监听动态的路由传参,从而
有时候需要给后端传递的参数是FormData(表单)格式(默认是json格式) // 在main.js中配置如下代码 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded' axios.defaults.transformRequest = [function (data) { let ret = '' for (const it in data) { ret += encodeUR
3. axios.delete(url[, config]) 4. axios.head(url[, config]) 5. axios.post(url[, data[, config]]) 6. axios.put(url[, data[, config]]) 7. axios.patch(url[, data[, config]]) axios
VueAxios请求封装是一种在Vue.js开发中常用的技术,它可以提高代码的复用性和开发效率。封装后的Axios请求可以被其他组件或页面所调用,无需再次编写代码,减少了代码量,同时还能够保证程序的可读性和可维护性。 VueAxios请求封装需要先引入Axios库,并在Vue实例中创建一个VueAxios实例。接着,可以通过封装函数来进行不同的请求操作,如GET、POST等,同时可以设置请求参数请求头和错误提示等。封装的函数可以在需要的地方进行调用,并通过Promise进行异步处理。 除此之外,还可以在VueAxios请求封装中引入拦截器用于请求前和请求后的处理,如添加请求头、设置loading状态、统一错误处理等。拦截器的使用可以进一步提高代码的可用性和健壮性。 总之,VueAxios请求封装可以让我们在开发过程中更加方便地进行API请求,同时可以提高程序的可读性、可维护性和健壮性。