最近需要用到关于axios的封装和使用,下面就简单记录一下我的操作。如果有更简单的可以评论区告诉的。直接上代码!!!认真花三分钟看看,对于不会怎么封装axios的伙伴有一定的帮助,可以直接掌握封装思想和方法!!认真看认真看!!!!
该篇文章是在vue的情景下使用的
1.在某个目录下创建一个文件夹。建议在src下面新创建。同时创建一个api.js文件和httpHelper.js文件。
其中api.js是用来进行拦截的。因为每次往后端发送请求什么的,都需要拦截一下,看看能不能成功拦截或者是返回是否符合要求。
2.api.js文件
import axios from 'axios';//这个需要你自己去npm install axios进行安装
const axiosInit = axios.create({//创建一个axios实例
baseURL:"http://localhost:8090",//基准URL,就是相同的那一部分
time: 3000,//响应时间
})
//下面的是请求拦截
axiosInit.interceptors.request.use((config) => {
// 请求成功,一般都需要在这里做一些配置,下面的是我自己加上token到请求头
//如果本地缓存中存在后端发过来的token,就在请求头中添加token上去
if (localStorage.getItem('token')) {//括号里面的token是你自己定义的,因为我在我的登录界面的时候,就把后端返回的token存在localStroage,同时命名为token,所以这里你们可以自己根据自己的项目进行修改。如果
config.headers['token'] = localStorage.getItem('token');//添加上去请求头
}
return config;//通过,返回响应的拦截
}, (error) => {//出现错误
return Promise.reject(error);//返回错误信息
}
)
//下面的是响应拦截
axiosInit.interceptors.response.use(
(response) => {//如果后端返回成功,就执行{}里面的内容
console.log(response);//打印一下后端返回的数据
if(response.status == 200){//判断一下后端返回的数据中的状态码是不是200,如果是200,就执行下面的return
return Promise.resolve(response);
}else{//如果返回的状态码不是200,就返回错误的信息,同时也可以在这里定义其他的状态码,然后加上去
return Promise.reject(response);
}
},
(error) =>{//后端没有成功返回数据,就执行下面的return
return Promise.reject(error);
}
)
export default axiosInit;//把上面创建的实例暴露出去,方便等等我们在httpHelper.js文件进行引入
3.httpHelper.js文件
import axiosInit from '@/api/api'; //把上面的暴露出来的axionInit进行引入,这样就可以使用我们上面定义的拦截器
//封装get函数
export const get = (url,data) => {
return axiosInit({
url:url,
method:'GET',
params:data,
})
}
//封装put函数
export const put = (url,data) => {
return axiosInit({
url:url,
method:'PUT',
data:data,
})
}
//封装post函数
export const post = (url,data) => {
return axiosInit({
url:url,
method:'post',
data:data,
})
}
//括号里面的url和data都是调用的时候传进来的参数
//我上面只是封装了常用的get、post、put请求方法,其他你们也可以自行封装。我这里不是采用默认导出的,因为需要什么就进行按需导入。如果默认导出的话,还得导出名字.post,个人不是很喜欢这种使用方法。
4.vue文件(就是需要用到方法的vue文件中)
这里就用一个登录的例子来说明
<template>
//具体样式自行定义,这里就只是显示一个button,就是登录按钮
//我采用的是element框架,要是不知道是啥的话,你们就把自行百度 button触发事件
<el-button @click="confirm">登录</el-button>
</template>
<script>
//导入httpHelper文件
import {post,get,put} from '@/api/httpHelper.js';//from后面跟的是httpHelper.js文件的路径,你们自行修改
//下面的name,data什么的自行定义
methods:{
confirm() {
this.$refs.loginForm.validate((valid) => {
if (valid) {
//valid成功为true,失败为false
//去后台验证用户名密码
post("/user/login", this.loginForm)//调用按需导入的post方法,"/user/login"这个就是传到httpHelper.js中的url,this,loginForm就是把输入的账号密码作为参数同样传到httpHelper.js,httpHelper.js里面再进行发送到后端
.then((res) => res.data)//数据过滤,只要后端返回的data数据
.then((res) => {
if (res.code == 200) {//其实这里可以不用判断状态码了。因为我们拦截器那里进行验证了,我只是贪好玩规范写一下
// 把后端返回的数据存储在浏览器本地的缓存中
// token是存储token的
localStorage.setItem("token", res.data.token);//这里就是我前面说的把后端返回的token值存储在本地,同时命名为toke
this.$router.replace("/Index");//满足条件就路由跳转
} else {
return false;
}
})
.catch((err) => {
ElMessage.error(err);//这里只是打印出来错误信息,你们也可以删掉
});
} else {
return false;
}
});
},
},
</script>
好,大功告成!如果你们看到这里的话,你们就已经会了axios的封装了!有不会的评论区说一下,我看到会及时回复!
代码就像是粥一样,需要用时间去熬出来的!!