vue 封装 axios 请求
Vue 封装axios请求
·
需求:向后端请求拿数据
好处:把所有的请求方法放在一个文件夹里面,方便优化
先把 axios 安装起
npm install axios --save
接下来按照步骤走吧 go go go~
1、在src路径下建http文件夹 并且创建 api.js env.js request.js 这三个文件
2、 在 env.js 文件
作用:封装我们的公共地址
export default {
// 开发环境
dev: {
baseUrl: "开发环境公共地址"
},
//线上接口
prod: {
baseUrl: "线上环境公共地址"
}
};
3、在 request.js 文件
作用:创建 axios 以及封装请求拦截和相应拦截
import axios from "axios"; //引入axios
import env from "./env";
// 创建axios实例
const service = axios.create({
//这里拿线上接口测试
baseUrl: env.prod.baseUrl,
headers:{ //请求头
'Content-Type': 'application/json;charset=UTF-8',
},
settimeout:50000,//超时时间
});
// 请求拦截器
service.interceptors.request.use(
config => {
// 在发送请求之前做些什么 验证token之类的
// console.log("请求的数据:", config);
if (localStorage.getItem('token')) {
config.headers.token = localStorage.getItem('token')
}
return config; //记得一定要 返回config
},
error => {
// 对请求错误做些什么
// console.log("请求的数据:", error);
return Promise.reject(error);
}
);
// 响应拦截器
service.interceptors.response.use(
response => {
// console.log("返回的数据", response);
// 这里拦截401错误,并重新跳入登页重新获取token
if (response.status && response.status === 200) {
// 通讯成功
if (response.data.code === 0) {
return response.data
} else if (response.data.code === 401) {
// 如果是token过期,跳转至登录
this.$message.error("登录已过期,请重新登录!");
localStorage.removeItem('token') // 移除token,跳转至登录
router.push({
path: '/Login'
})
}
return Promise.resolve(response.data)
}
},
error => {
// 对响应错误做点什么
return Promise.reject(error);
}
);
export default service;
4、 在 api.js 文件
作用:主要是需要的接口地址
// ====== 方法1:把所有请求的地址封装成一个方法,好处就是有个归总 ======
//引入request.js文件
import request from "./request";
// 轮播
export function getBanners(data) {
return request({
url: "/banner", // 这个地址是去掉公共地址剩下的地址
method: "GET", // 请求方式 支持多种方式 get post put delete 等等
data //发送请求要配置的参数 无参数的情况下也可以不写
});
}
// ====== 方法2:直接挂载到全局 ======
//把request.js文件引入到main.js中
import http from "./request";
Vue.prototype.$http = http;
// 最后是在页面中的引用:
this.$http.post('/getuser/user',这里填参数).then((res) => {
console.log(res);
}).catch((err) => {
console.log(err);
});
5、 最后是在页面中的引用
那个页面需要请求数据 就引入相应的方法 比如我的首页需要引入 轮播
<script>
// 1.引入需要的接口
import { getBanners } from "../http/api";
export default {
name: "Home",
components: {},
methods: {
//2.直接使用 .then 是请求成功的回调 .catch是请求失败的回调
getUser(){
getBanners('有参数就填这里,没有参数就空着').then((res) => {
console.log(res);
}).catch((err) => {
console.log(err);
});
}
}
};
</script>
大功告成,小女子告辞 ~~~
更多推荐
已为社区贡献2条内容
所有评论(0)