首页 > 资讯 > 前端开发 > JavaScript >vue cli3 项目中如何使用axios发送post请求

277

分享到

vue cli3 项目中如何使用axios发送post请求

2024-04-02 19:04:59 277人浏览八月长安

摘要

目录使用axiOS发送post请求首先需要安装对应的第三方包发送post请求发送get请求将index.js中再添加如下代码Vue使用axios的踩坑记录axios跨域解

使用axios发送post请求

React 同样适用

首先需要安装对应的第三方包

cnpm i -S axios
cnpm i -S lodash

然后在做下边的

在vue 项目中创建一个这样的文件目录

发送post请求

index.js中的文件内容是：

import axios from "axios"
import _ from "lodash"
 
// 处理请求参数
const coverFORMData = (obj) => {
	let data = Object.keys(obj.data).map(item => {
		let value = obj.data[item];
		if(_.isArray(value) || _.isObject(value)){
			value = JSON.stringify(value)
		}
		return encodeURIComponent(item) + '=' + encodeURIComponent(value);
	}).join('&');
 
	return {data: data, url: obj.url};
}
 
function post(obj) {
	const { data, url } = coverFormData(obj);
	return new Promise((resolve, reject) => {
		axios.post(url,  data)
			.then(res => {
				// obj.success ? obj.success(res) : null
				resolve(res.data);
			})
			.catch(error => {
				// obj.error ? obj.error(error) : null;
				reject(error);
			})
	})
 
}
 
let requests = {}
requests.post = post
 
export default requests

使用：

效果：

发送get请求将index.js中再添加如下代码

requests.get = obj => {
	const { data, url } = coverFormData(obj);
	return new Promise((resolve, reject) => {
		axios.get(url + '?' + data).then(res => {
			obj.success ? obj.success(res) : null;
			resolve(res.data);
		}).catch(error => {
			obj.error ? obj.error(error) : null;
			reject(error);
		})
	})
}

使用和post的一模一样只是将requests.post改成request.get

vue使用axios的踩坑记录

axios跨域

在自己写的一个项目中，想要直接将学号和密码发到学校的教务系统，结果跨域了。。。。。。

原代码

// url为要访问的域名
axios.get(`${url}?method=authUser&xh=${this.sNo}&pwd=${this.passWord}`)
.then((res) => {
    // ...
}).catch((err) => {
	// ...
})

在这里插入图片描述

在网上找解决跨域的问题时，看到很多都是修改config下的…文件，但是vue-cli脚手架创建的vue3项目中并没有config文件夹，所以直接去到官方文档查找配置

解决方法

在package.json同级文件夹下创建vue.config.js，配置如下

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'url', //设置要访问的域名和端口号
                changeOrigin: true, //设置为跨域
                pathRewrite: {
                    '^/api': '/' //这里理解成用‘/api'代替target里面的地址，在后面发起请求时，/api就会代替target中的值，可以实现跨域
                }
            }
        }
    }
}

修改我们的请求代码

axios.get(`/api/app.do?method=authUser&xh=${this.sNo}&pwd=${this.password}`)
            .then((res) => {
                // ...
            }).catch((err) => {
				// ...
            })

这里使用/api替换了原来的url，实现跨域

axios发起post请求后端无法接收数据

在第一次使用axios向后台发送post请求时，发现自己发送的数据后端没有接收到，后端用的是spring框架，但是同样的请求我使用自己的node服务器测试时却好好的

原代码

axios.post(url,{data:data})
  .then(res => {
      // ...
  }).catch(err => {
      // ...
  })

我用node服务器打印请求发过拉的数据，都能得到{"data":1}，但是后端那里总是只能得到null

在查看前后端代码后总是觉得没问题，唯一的变数只有axios了，所以去到淘宝镜像上看axios的使用，看到特性里面的概述

在这里插入图片描述

大概就是说可以对请求中的数据和响应的数据做格式转换，而且会自动对json数据做转换，我尝试将上面的请求改成使用非json格式传输

axios.post(url,`data=${data}`)
  .then(res => {
      // ...
  }).catch(err => {
      // ...
  })

意料之中的成功了，那么为什么呢，在查阅资料后，终于在GitHub上找到了对应的源码

transformRequest: [function transformRequest(data, headers) {
	    normalizeHeaderName(headers, 'Accept');
	    normalizeHeaderName(headers, 'Content-Type');
	    if (utils.isFormData(data) ||
	      utils.isArrayBuffer(data) ||
	      utils.isBuffer(data) ||
	      utils.isStream(data) ||
	      utils.isFile(data) ||
	      utils.isBlob(data)
	    ) {
	      return data;
	    }
	    if (utils.isArrayBufferView(data)) {
	      return data.buffer;
	    }
	    if (utils.isURLSearchParams(data)) {
	      setContentTypeIfUnset(headers, 'application/x-www-form-urlencoded;charset=utf-8');
	      return data.toString();
	    }
	    // 看这里------------------------------------------
	    if (utils.isObject(data)) {
	      setContentTypeIfUnset(headers, 'application/json;charset=utf-8');
	      return JSON.stringify(data);
	    }
	    return data;
	  }]

当判断为对象时，会把headers设置为application/json;charset=utf-8，也就是Content-Type，而根据项目组里的后端同学所说的，服务端要求的是Content-Type': 'application/x-www-form-urlencoded，我试着在发送请求前将headers设置为application/x-www-form-urlencoded，结果还是不行，大概是因为源码中对headers的修改在自己的设置之后实现的，但是这样写的话，要写出一串很长的字符串，感觉挺麻烦的，那就可以尝试下面的方法

因为源码中是通过transformRequest来修改headers的，而这个方法我们其实也可以自己实现，所以我们只要在发送请求的时候自己来实现这个方法就可以了，这里通过修改data的数据结构来达到目的

import Qs from 'qs'
axios({
	url:url,
	data:{
		data:data
	},
	transformRequest: [function (data) {
	    // 对data的数据格式进行修改
	    return Qs.stringify(data)
    }],
	headers: {
		'deviceCode': 'A95ZEF1-47B5-AC90BF3'
	})
	 .then(res => {
      // ...
  }).catch(err => {
      // ...
  })

上面是将data的数据格式进行转换，但是我们也可以选择修改处理data的方式


axios({
	url:url,
	data:{
		data:data
	},
	transformRequest: [function transformRequest(data, headers) {
	    normalizeHeaderName(headers, 'Accept');
	    normalizeHeaderName(headers, 'Content-Type');
	    if (utils.isFormData(data) ||
	      utils.isArrayBuffer(data) ||
	      utils.isBuffer(data) ||
	      utils.isStream(data) ||
	      utils.isFile(data) ||
	      utils.isBlob(data)
	    ) {
	      return data;
	    }
	    if (utils.isArrayBufferView(data)) {
	      return data.buffer;
	    }
	    if (utils.isURLSearchParams(data)) {
	      setContentTypeIfUnset(headers, 'application/x-www-form-urlencoded;charset=utf-8');
	      return data.toString();
	    }
	    // 看这里------------------------------------------
	    if (utils.isObject(data)) {
	      setContentTypeIfUnset(headers, 'application/x-www-form-urlencoded;charset=utf-8');
	      let _data = Object.keys(data)
	      return encodeURI(_data.map(name => `${name}=${data[name]}`).join('&'));
	    }
	    return data;
	  }])
	 .then(res => {
      // ...
  }).catch(err => {
      // ...
  })

以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。

--结束END--

本文标题: vue cli3 项目中如何使用axios发送post请求

本文链接: https://lsjlt.com/news/145178.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

回答

如何调试操作系统的错误？
操作系统

2023-11-15发布

回答

操作系统中的I/O系统是如何实现的？
操作系统

2023-11-15发布

回答

如何实现操作系统的内存管理？
操作系统

2023-11-15发布

回答

什么是虚拟内存，它对操作系统有什么影响？
操作系统

2023-11-15发布

回答

ASP中的MVC架构和WebForms架构有什么区别和使用场景？
ASP.NET

2023-11-15发布

回答

ASP中的数据验证和数据校验有什么不同？
ASP.NET

2023-11-15发布

回答

ASP中的ADO对象和DAO对象有什么区别和使用方法？
ASP.NET

2023-11-15发布

回答

Node.js中的包管理器NPM是什么？如何使用它进行依赖管理？
node.js

2023-11-15发布

回答

Vue.js中的动态组件是什么？如何使用它来动态渲染组件？
VUE

2023-11-15发布

回答

如何使用Vue.js实现懒加载和预加载？
VUE

2023-11-15发布

vue cli3 项目中如何使用axios发送post请求

目录

使用axios发送post请求

首先需要安装对应的第三方包

发送post请求

发送get请求将index.js中再添加如下代码

vue使用axios的踩坑记录

axios跨域

解决方法

axios发起post请求后端无法接收数据

vue cli3 项目中如何使用axios发送post请求

vue cli3项目中怎么使用axios发送post请求

Vue中怎么使用axios发送post请求

在vue项目中使用axios发送post请求出现400错误的解决

vue项目中如何使用axios发送请求让ajax请求头部携带cookie

Vue项目如何创建首页发送axios请求

如何在Vue项目中使用axios请求

VUE项目使用axios发送post跨域请求，返回数据失败问题

React中如何使用axios发送请求

Vue怎么使用axios发送请求

vue怎么使用axios发送ajax请求

SpringBoot 如何使用RestTemplate发送Post请求

vue如何实现发送websocket请求和http post请求

vue中如何使用axios数据请求get、post方法

react如何发送axios请求

使用axios发送post请求返回400状态码如何解决

jquery如何发送post请求

vue项目中axios的封装请求

vue如何封装Axios的get、post请求

Java 使用 HttpClient 发送 GET请求和 POST请求

京东一面：post为什么会发送两次请求？???

鼠标划过时整行变色284607详解

鼠标划过时整行变色284415处理办法

TypeScript接口和类型的区别小结

写给小白学习的地理信息的表示法GeoJSON

vue使用Swiper踩坑解决避坑

JavaScrip简单数据类型隐式转换的实现

细说JS数组遍历的一些细节及实现

初学者如何快速搭建Express开发系统步骤详解

深入浅出JavaScript前端中的设计模式