Vue实战,简单vue案例
爱可信是一个基于承诺的超文本传送协议库，可以用在浏览器和节点。射流研究…中，下面这篇文章主要给大家介绍了关于某视频剪辑软件项目实战之优雅使用爱可信的相关资料，文中通过实例代码介绍的非常详细，需要的朋友可以参考下
目录
axios传参参数与数据传参封装爱可信总结
axios传参
params与data传参
参数传参：参数以k=vk=v格式放置在全球资源定位器(统一资源定位器)中传递跳羚。后端可以使用@RequestParam注解接受请求，或者保证参数名跟k一样时也可以接收到
只要是使用参数传参，无论是邮政请求还是得到请求都是拼接都全球资源定位器(统一资源定位器)中，此时的邮政请求也只是伪邮政请求
数据传参：参数被放在请求体中。后端必须使用@请求体来接收，否则会接收不到，因为爱可信默认传递的参数类型是应用程序/json，会将其转成数据格式。
举例：
某视频剪辑软件中：
导出功能登录（帐户、密码、组织类型){
退货请求({
URL:"/web API/登录",
方法： post ，
数据：{ 登录Id :帐户，密码：密码，组织类型：组织类型}
)}
则会转成数据格式放入请求体中
如果后端中想这样接收，是接收不到的，因为此时后端的接收格式是application/x-www-form-urlencoded
@PostMapping(value=/login )
公共结果登录（字符串登录Id，字符串密码、int orgType、HttpServletResponse响应){
}
如果我们使用数据传参，但后端不想使用@RequesBody的方式来接收，那怎么处理呢？
首先要设置请求头
标题：{
//关键
content-Type ":" application/x-www-form-urlencoded；charset=UTF-8
}
直接拼接成k=v
适用参数较少的情况
导出功能登录（帐户、密码、组织类型){返回请求({
URL:"/web API/登录",
方法： post ，
数据：登录Id=帐户密码=密码组织类型=组织类型
})
}
使用全国工业产品生产许可证实现数据对象的k=v格式化
适用参数较多的情况
安装qs : npm安装全国工业产品生产许可证
导入全国工业产品生产许可证表单qs
导出功能登录（帐户、密码、组织类型){
退货请求({
URL:"/web API/登录",
方法： post ，
数据：QS。stringify({ log inid :account， password:password， orgType:orgType})
})
}
这样后端就可以这样接收了：
@PostMapping(value=/login )
公共结果登录（字符串登录Id，字符串密码、int orgType、HttpServletResponse响应){
}
封装axios
设置请求拦截器，可以在这里添加令牌，这样每次发起请求时都会携带代币了
设置响应拦截器，根据后端的状态码进行相应处理，比如但发现代币失效后，就跳转到登录页面等
从" axios "导入爱可信
从"元素-用户界面"导入{通知，消息框，消息}
从" @/商店"导入商店
从" @/utils/auth "导入getToken
从" @/utils/errorCode "导入错误代码
axios。默认值。headers[ Content-Type ]= application/JSON；charset=utf-8
//创建爱可信实例
const service=axios.create({
//axios中请求配置有基础地址选项，表示请求统一资源定位器公共部分
baseURL:"http://localhost:8082 "，
//超时
超时：10000
})
//请求拦截器
服务。截击机。请求。使用(配置={
//是否需要设置代币
const isToken=(配置。标题 { }).isToken===false
if (getToken()！isToken) {
配置。headers[ Authorization ]= Bearer getToken()//让每个请求携带自定义代币请根据实际情况自行修改
}
返回配置
},错误={
console.log(错误)
承诺。拒绝（错误)
})
//响应拦截器
服务。截击机。回应。使用(RES={
//未设置状态码则默认成功状态
常数代码=资源数据。代码 200；
//获取错误信息
const msg=错误代码[code] RES . data。消息 错误代码[默认]
如果(代码===401) {
MessageBox.confirm(登录状态已过期，您可以继续留在该页面，或者重新登录, 系统提示, {
confirmButtonText:重新登录，
取消按钮文本： 取消，
类型："警告"
}
).然后(()={
store.dispatch(“注销”).然后(()={
位置。href=/index ；
})
}).catch(()={ })；
} else if (code===500) {
消息({
消息：味精，
类型："错误"
})
退货承诺。拒绝（新错误（消息))
} else if(代码！==200) {
通知。错误({
标题：味精
})
返回承诺。拒绝(错误)
}否则{
返回结果数据
}
},
错误={
console.log(err 错误)
let { message }=错误
if (message==网络错误){
消息=后端接口连接异常；
}
else if(消息。包括(超时){
消息=系统接口请求超时；
}
else if (message.includes(请求失败，状态代码为)){
消息=系统接口消息。substr(消息。长度-3)’异常；
}
消息({
消息：消息，
类型："错误",
时长：5 * 1000
})
退货承诺。拒绝（错误)
}
)
导出默认服务
使用
从导入请求。/请求
导出函数apiLogin(数据){
退货请求({
网址："/用户/登录",
方法： post ，
数据：数据
})
}
参考链接：https://www。jb51。网/文章/237137。html文件的后缀
总结
到此这篇关于某视频剪辑软件项目实战之优雅使用爱可信的文章就介绍到这了，更多相关某视频剪辑软件优雅使用爱可信内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。