vue-axios使用,vue axios调用后端接口
本文主要介绍如何在Vue项目中使用axios request。对Vue感兴趣的同学可以参考一下。
目录
1、安装2、无封装存在的问题3、文件的创建4、请求地址配置5、axios配置、请求头的设置和响应代码处理6、实际项目中的使用，与后台的数据交互必不可少。我一般用axios库，所以下面的例子都是基于axios封装的。
1、安装
首先，npm安装axios，很简单：NPM安装Axios
2、没有封装存在的问题
如果项目中没有封装的接口，您可以在文件中的任何地方看到以下接口调用方法：
这个。$axios.post(/user/add ，{
参数：{
名称：this.name，
年龄：this.age
}
})。然后(res={
console.log(res)
})。然后(err={
console.log(res)
})
这样写也不是不可以，只是有一些缺陷。接口请求的url分散在各个文件中。如果你需要在接口调用成功或失败时做一些事情，你需要改变每个文件。因此，这些接口请求是统一和集中的。如果有调整的话，直接在集中的文件里找修改就好了，不用每一个文件都检查。
3、创建文件
首先，在项目的src目录下，新建文件夹和文件的目录结构如下：
src源目录
API接口文件目录
log in . api . js登录模块的接口API
user.api.js用户模块接口api
服务请求相关文件目录
Address.js请求地址配置文件
request.js axios封装、请求拦截、响应代码处理等操作。
Api文件模块可以根据其实际项目、业务功能、业务逻辑或其他形式进行划分。
4、请求地址配置
一般会有很多项目环境，少数会有开发环境和生产环境。一般情况下，开发环境和生产模式都有不同的基URL，我们需要根据不同的环境来切换不同的基URL。
Address.js文件：
//根据process.env.NODE_ENV切换不同的baseURL
const is pro=process . ENV . node _ ENV=== production
模块.导出={
// APIs :vue . config . js中的代理集
baseURL: isPro？http://192 . 168 . 100 . 120/ceds :/API
}
5、axios 配置，设置请求头及响应码处理
总体思路是封装一个请求类，其中包含get和post等请求方法。这些请求方法都会调用request方法，Request方法通过传入的不同参数调用原始的axios请求，然后返回一个承诺。
request.js文件：
从“axios”导入axios
从“qs”导入Qs
从“vue”导入Vue
从“@ utils/session . utils”//中导入{gettoken}，存储获取的令牌文件。
“发件人地址”。/address //请求地址
类别请求{
构造函数(){
//创建axios实例
这个。_axios=axios.create({
baseURL: address.baseURL，
超时：1000 * 5，//请求超时
邮件头：{}
})
//请求拦截
这个。_ axios . interceptors . request . use(
配置={
const requestHeader={
x-Requested-With : XMLHttpRequest ，
Content-Type“:”应用程序/JSON；字符集=UTF-8 ，
访问控制允许起源: * ，
Token: getToken() //请求头统一添加token。
}
config . headers=object . assign(config . headers，requestHeader)
返回配置
},
错误={
承诺.拒绝(错误)
}
)
}
//根据请求方式，判断参数是放在查询中还是放在正文中。
//最直观的区别，比如GET请求在url中包含参数，而POST是通过request body将参数放在正文中，所以提交时参数的形式是有区别的。
//以下列了四种我一般常用请求方式的参数形式，大家可以自行调整
/**
* 发送得到请求
* @param {String} url地址
* @param {Object}查询查询参数
* @返回数据数据
*/
get (url，query={}) {
归还这个. request(get)(url，{
.询问
})
}
/**
* 发送邮政请求
* @param {String} url地址
* @param {Object} body查询参数
* @返回数据数据
*/
帖子(url，body={}，标题){
让数据；
if(this.isFormData(body)) {
数据=正文
} else if(Array.isArray(body)) {
数据=正文
}否则{
数据={.body }
}
归还这个. request(post)(url，headers)(url，data)；
}
put (url，body={}) {
归还这个. request(put)(url，{
.身体
});
}
删除(url，body={}) {
归还这个. request(delete)(url，{
.身体
});
}
isFormData=v={
返回对象。原型。托斯特林。call(v)===[对象表单数据]
}
/**
* 设置请求头
* @param {Object}头请求头
*/
setHeaders (header) {
对象.键(头)。forEach(key={
这个. axios。默认值。标题[关键字]=标题[关键字]
})
}
//处理请求头头球
handleHeaders () {
常量头={}
标头[XMIME-TYPE]=3
headers[ Content-Type ]= application/JSON；charset=UTF-8
返回标题
}
/**
* 发送请求
* @param {String}方法请求方法类型
* @param标题
* @returns {function(*=，*=):Promiseunknown}
* @私人
*/
_请求(方法，头){
这个。设置标题(this。句柄头())//设置统一的请求头
if (headers) {
this.setHeaders(头)//自定义请求头
}
返回(网址，数据，超时)={
常量配置={
url，
方法，
超时：超时这个. axios.defaults.timeout
} //构造请求配置
//判断请求类型区别详解
const paramType=[get ， delete].索引Of(方法)!==-1 ?参数:数据
配置[参数类型]=数据
//参数序列化
配置。paramsserializer=params={
返回Qs.stringify(params，{ array format: repeat })；
}
返回新承诺((解决，拒绝)={
//发送真正的请求，验证权限，检查404等状态
这个. axios _ axios。请求（配置)。然后(响应={
如果(这个。handlesuccessstatus(响应。数据。code，response.data)) {
如果(回应。标题[ content-type ]！== text/plain；charset=urf-8) {
解决（
//对响应结果二次包装
对象。分配（
{
成功：数字(响应。数据。代码)===200，
数据：响应。数据。数据，
消息：response.data.msg
},
响应。数据
)
) //处理返回结果
}否则{
解析(响应.数据)
}
}
},响应={
//处理错误码
if(response.response) {
常量状态代码=响应。回应。状态
this.handleErrorStatus(状态码)
}否则{
vue . prototype . $ message . error(response . message)
}
拒绝(响应)
})。catch(错误={
拒绝(错误)
})
})
}
}
}
//请求成功，返回错误代码
//具体的状态码和后台开发者统一，然后根据状态码给出相应的提示。
//以下是我在项目中的操作，可以自行调整扩展。
handleSuccessStatus(代码，数据){
让结果=
让flag=false
开关(代码){
案例“20007”:
Result=未找到二级认证密码！
标志=真
破裂
案例“20008”:
Result=您的二级认证密码尚未修改，请先修改！
标志=真
破裂
案例“20009”:
Result=您没有开通二次认证，请联系管理员！
标志=真
破裂
案例“90001”:
Result=请输入二级认证密码！
标志=真
破裂
案例“90002”:
Result=没有操作权限！
标志=真
破裂
默认值：
破裂
}
//发出通知
//$message方法是我按需引入的element-ui中的提示组件。您可以用自己的提示组件替换它。
如果(结果){
Vue.prototype.$message.error(结果)
}
返回标志
}
//根据错误代码得到错误提示
handleErrorStatus (statusCode) {
让errorMsg=
if (statusCode===500) {
ErrorMsg=数据请求失败，请联系管理员！
} else if (statusCode===404) {
ErrorMsg=请求地址错误！
} else if (statusCode===402) {
ErrorMsg=您目前没有操作该数据的权限！
}否则{
ErrorMsg=请求中有错误！
}
//发出通知
vue . prototype . $ message . error(error msg)
}
}
导出默认新请求()
6、使用
在接口管理文件中，我们可以调用上面封装的请求类，并传入相应的参数。
User.api.js文件：
导入http自./服务/请求
/**
* @description获取用户列表
* @param {*} params请求接口的params
*/
//这里定义的reqUserList方法将调用我们封装的请求中的get方法。get方法的第一个参数是请求地址，第二个参数是查询参数。
export const req userlist=params=http . get(/user/list ，params)
在被称为。vue文件，介绍一下这个方法，传入参数就可以了。
从“@ APIs/user . API”//import API导入{rexuserlist}
导出默认值{
名称：用户列表，
.
已创建(){
},
方法：{
异步getUsers() {
//调用api接口，传入参数
const res=await reqUserList({
第1页，
尺寸：10
})
Console.log(res) //获取的响应结果
}
}
}
这样，接口的封装和基本使用就完成了。
PS:以上文件名、文件夹名、方法名、路径等。都是自己获得的，可以根据自己的代码风格习惯进行调整。
以上就是如何在Vue项目中使用axios request的细节。更多关于在Vue项目中使用axios的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。