PS:本文代码在vue-cli3构建的基础vue项目之上进行编写:vue create my-project
axios 是一个基于 promise 的 http 库,可以用在浏览器和 node.js 中, 也是vue官方推荐使用的http库。
axios很好用,其中之一就是它的拦截器十分强大,我们可以为请求和响应设置拦截器,比如请求拦截器可以在每个请求里加上token,做了统一处理后维护起来也方便,响应拦截器可以在接收到响应后先做一层操作,如根据状态码判断登录状态、授权。
之前初学的时候,经常将axios数据请求写在各组件方法内,但实践证明,如果项目接口变动要修改url地址等参数会比较为麻烦,不易维护,于是需要对axios进行封装并将接口统一管理。
当然在最之前,我们需要安装axios,使用命令 npm install axios --save 即可。
一、新建函数文件
在 src目录 下新建一个 axios目录,然后在里面创建 axios-request.js 和 axios-api.js 两个文件,
其中 aixos-request.js 用于对axios进行封装,axios-api.js 用于接口的统一管理。
二、对axios进行封装
axios-request.js代码如下:
import axios from "axios";
import { Message } from "element-ui";
// 创建一个axios实例
const axiosService = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
timeout: 5000 // 设置超时时间为5s
});
// request拦截器 ==> 对请求参数进行处理
axiosService.interceptors.request.use(
config => {
// 可以在发送请求之前做些事情
// 比如请求参数的处理、在headers中携带token等等
return config;
}, error => {
// 处理请求错误
console.log(error); // for debug
Promise.reject(error);
}
);
// respone拦截器 ==> 对响应做处理
axiosService.interceptors.response.use(
response => {
const res = response.data;
// 如果自定义的返回码不等于200, 就返回一个错误
if (res.code !== 200) {
return Promise.reject(new Error(res.message || "Error"))
} else {
return res;
}
}, error => {
// 判断error的status代码,并将对应的信息告知用户
let text = "";
let err = JSON.parse(JSON.stringify(error));
if (err.response.status) {
switch (error.response.status) {
case 400:
text = "请求错误(400),请重新申请";
break;
case 401:
text = "登录错误(401),请重新登录";
return this.$router.replace("/login");
case 403:
text = "拒绝访问(403)";
break;
case 404:
text = "请求出错(404)";
break;
case 408:
text = "请求超时(408)";
break;
case 500:
text = "服务器错误(500),请重启软件或切换功能页!";
break;
case 501:
text = "服务未实现(501)";
break;
case 502:
text = "网络错误(502)";
break;
case 503:
text = "服务不可用(503)";
break;
case 504:
text = "网络超时(504)";
break;
case 505:
text = "HTTP版本不受支持(505)";
break;
default:
text = "网络连接出错";
}
} else {
text = "连接服务器失败,请退出重试!";
}
Message({
showClose: true,
message: text,
type: "error"
});
return Promise.reject(error);
}
);
// 将写好的axios实例暴露出去
export default axiosService;
三、对接口进行统一管理
axios-api.js代码如下:
import axiosService from "./axios-request"; // 从axios-request.js内引入axiosService
// 下面是POST形式
export const userLogin = data => {
return axiosService({
url: "/xxxx/user/xxxx", // 根据实际接口地址来写
method: "post",
data
});
};
// 下面是GET形式
export const userInfo = params => {
return axiosService({
url: "/xxxx/user/xxxx", // 根据实际接口地址来写
method: "get",
params
});
};
这里要注意下,post参数放在data内,get参数放在params内!
四、在组件内使用写好的接口
在组件中使用:
下面是模拟的一个登录接口,代码不太严谨,仅演示大致用法:
<script>
import {userLogin} from "@/axios/axios-api"; // 引入登录接口函数
export default {
name: "login",
components: {},
methods: {
async login() {
let username = this.username;
let password = this.password;
let params = {
username: username,
password: password
};
if (!username || !password) {
alert("账号或密码不能为空");
} else {
if (username.length < 51 && password.length < 51) {
let res = await userLogin(params);
console.log(res);
} else {
alert("账号或密码输入字符不能超过50位");
}
}
}
}
};
</script>
上面的代码中我们用了 async await,是ES7新出的特性,具体用法可以Google或者到MDN上查看。
五、总结
当然也可以不将接口统一管理,而只用axios封装,然后在组件内写异步请求函数。
以上是个人在之前学习的时候,所用的封装方式,如有错误之处欢迎留言指正。
以上就是Vue封装Axios请求和拦截器的步骤的详细内容,更多关于Vue封装的资料请关注小牛知识库其它相关文章!
本文向大家介绍vue axios请求拦截实例代码,包括了vue axios请求拦截实例代码的使用技巧和注意事项,需要的朋友参考一下 axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请
本文向大家介绍Vue中axios的封装(报错、鉴权、跳转、拦截、提示),包括了Vue中axios的封装(报错、鉴权、跳转、拦截、提示)的使用技巧和注意事项,需要的朋友参考一下 统一捕获接口报错 弹窗提示 报错重定向 基础鉴权 表单序列化 实现的功能 统一捕获接口报错 : 用的axios内置的拦截器 弹窗提示: 引入 Element UI 的 Message 组件 报错重定向: 路由钩子 基础鉴权:
本文向大家介绍vue中axios请求的封装实例代码,包括了vue中axios请求的封装实例代码的使用技巧和注意事项,需要的朋友参考一下 axios Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中, 也是vue官方推荐使用的http库;封装axios,一方面为了以后维护方便,另一方面也可以对请求进行自定义处理 安装 封装 我把axios请求封装在htt
一、拦截请求 mitmproxy的强大功能是拦截请求。拦截的请求将暂停,以便用户可以在将请求发送到服务器之前修改(或丢弃)该请求。mitmproxy的set intercept命令配置拦截。i默认情况下,该命令绑定到快捷方式。 通常不希望拦截所有请求,因为它会不断中断您的浏览。因此,mitmproxy希望将流过滤器表达式作为set intercept选择性拦截请求的第一个参数。在下面的教程中,我们
本文向大家介绍Vue 前端实现登陆拦截及axios 拦截器的使用,包括了Vue 前端实现登陆拦截及axios 拦截器的使用的使用技巧和注意事项,需要的朋友参考一下 该项目是利用了Github 提供的personal token作为登录token,通过token访问你的Repository List。通过这个项目学习如何实现一个前端项目中所需要的 登录及拦截、登出、token失效的拦截及对应 axi
配置拦截器 declarations: [ AppComponent ], HttpClientModule ], providers: [ [ { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true } ] bootstrap: