vue使用axios 发送post请求的四种方法,vue axios post
本文主要介绍vue如何封装Axios的get和post请求，有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。
目录
封装Axios 1的get和post请求。封装了Axios 2的基本配置。封装网络请求3。get请求和post请求封装后在vue中使用vue axios的两种方法(封装和非封装)用法
封装Axios的get、post请求
Axios在vue项目中应用广泛，每次写一次不方便。尤其是config配置项是公共的，可以完整封装，这样下次就可以直接CV了！毕竟CV大法香啊！
1.封装Axios基础配置
用以下内容创建一个request.js文件。我在评论里放了说明文字。
从“axios”导入axios
导出功能请求(配置){
//1.创建axios的实例
const instance=axios.create({
//设置基本的url配置项，这样就不用在接口的url前面写URL: http://127 . 0 . 0 . 1:8000/API/home ，直接写成url:/api/home 就可以了。
baseURL: http://127.0.0.1:8000/，
//设置请求超时
超时：5000
})
//2.axios拦截器，不用的话可以忽略这一段。
//2.1.请求拦截的作用
instance . interceptors . request . use(config={
返回配置
}，错误={
Console.log(请求拦截err: err )；
})
//2.2.应对拦截
instance . interceptors . response . use(RES={
返回结果数据
}，错误={
Console.log(响应拦截错误： err )；
})
//3.发送一个真实的网络请求
返回实例(配置)
}
2.封装网络请求
我们可以把所有相关的网络请求放在一个js里，这样在使用和修改的时候很容易找到。get请求相对简单，post请求需要根据要传输的对象类型进行不同的设置。
现在我们来谈谈post请求的常见数据格式(内容类型)。
Content-Type: application/json :请求体中的数据将以json字符串的形式发送到后端，这是axios默认的请求数据类型。我们只需要序列化参数json字符串进行交付，不需要多余的配置。
Content-Type: application/x-www-form-urlencoded:请求体中的数据将以通用形式(键-值对)发送到后端
Content-Type: multipart/form-data:将请求体的数据处理成消息，以标签为单位，用分隔符隔开。您可以上传键值对和文件。
使用以下内容创建一个network.js文件：
//导入打包的Axios
从导入{request}。/request //注意request.js的相对路径问题
//1.获取请求-获取首页的多个数据。
导出函数getHomeMultidata() {
退货请求({
URL:“/API/home”，
方法：“get”，
//它可以有参数，也可以没有参数
//params: {
//用户名： Lan ，
//密码：“123”
//}
})
}
//2.1 post请求——传输json数据时，获取电视剧的多个数据。
导出函数getTvshowMultidata() {
退货请求({
URL:“/API/TV show”，
标题：{
“内容类型”:“应用程序/json”
},
方法： post ，
数据：{
用户名：“局域网”，
密码：“123”
}
})
}
//2.2 post请求-传输文件流和表格形式数据时
导出函数getMovieMultidata() {
退货请求({
URL:“/API/电影”，
标题：{
“content-Type”:“multipart/form-data”；
},
方法： post ，
数据：{
用户名：“局域网”，
密码：“123”
}
})
}
3.vue中使用
在脚本标记中按需导入要在network.js中使用的方法。
从“网络/家庭/网络”导入{ getHomeMultidata }；//导入js，路径根据文件位置自行设置
根据promise的格式调用方法中的函数。
已创建(){
//只调用方法中的函数。
getHomeMultidata()。然后(
res={
//这里res是返回的数据，返回的数据会被处理和显示。
this . banners=RES . home data . slice(0，5)
this . newest data=RES . home data . slice(5，12)
).接住(
错误={
console.log(错误)
}
);
},
网络中的其他网络请求方法同上。
vue axios两种方法(封装和不封装)get请求和post请求
没有封装的用法
1.首先在项目中下载axios。
m install axios-s//该方法会将axios下载到package.json中的‘dependencies’模块，可以自己检查。
2.因为没有封装，所以需要参考axios在单个vue组件中写js的地方；语法如下
脚本
从“axios”导入axios
/脚本
3.然后调用生命周期函数中的数据。
导出默认值{
已创建(){
//获取请求
axios.get(url ，{
Params: {//为get请求传递了参数，但get请求没有参数。参数已修复。
密码：“123456”，
用户名：“320621200305185129”，
},
})。然后(函数(响应){
console.log(响应，666666)；
})。catch(函数(错误){
console.log(错误，44444)；
});
},
}
//发布请求
axios.post(url ，{
//以下是参数
名字：“弗雷德”，
姓氏：“燧石族”
})。然后(函数(响应){
console.log(响应)；
})。catch(函数(错误){
console.log(错误)；
});
每个项目的界面都不一样。在很多情况下，代码不是唯一的，所以应该灵活使用。
封中之后的用法
首先是一个目录utils，request.js就是在其中创建和编写的。
从“axios”导入axios
导出功能请求(配置){
//1.创建axios的实例
const instance=axios.create({
//设置基本的url配置项，这样界面处的url就不用写在前面了。
基本URL:“http://192 . 168 . 0 . 112:9518/”，基本代码
//设置请求超时
超时：5000
})
//2.axios拦截器，不用的话可以忽略这一段。
//2.1.请求拦截的作用
instance . interceptors . request . use(config={
返回配置
}，错误={
Console.log(请求拦截err: err )；
})
//2.2.应对拦截
instance . interceptors . response . use(RES={
返回结果数据
}，错误={
Console.log(响应拦截错误： err )；
})
//3.发送一个真实的网络请求
返回实例(配置)
}
然后在目录下创建api，在这里创建index.js，在这里的引用上面创建axios实例。
从导入{请求}./utils/请求
//获取请求
导出函数邓璐(){
退货请求({
url:“登录”，
方法：“get”，
Params:{ //下面是传递的参数。//一般get请求不传递参数。
密码：“123456”，
用户名：“5555555555”
}
//header: {//已经在request.js中全局设置，也可以在请求中局部设置其他头。
//Content-Type: text/plain
//}
})
}
//发布请求
导出函数邓璐(){
退货请求({
url:“登录”，
方法： post ，
Data:{ //下面是传递的参数
密码：“123456”，
用户名：“5555555555”
}
//header: {//已经在request.js中全局设置，也可以在请求中局部设置其他头。
//Content-Type: text/plain
//}
})
}
然后你需要在写js的vue组件中引入index.js。
脚本
从导入邓璐./api/index
/脚本
之后就可以在vue组件法中应用了。下面是我根据上面的代码在vue组件中应用的一个例子。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。