Vue封装Axios请求和拦截器的步骤


Posted in Javascript onSeptember 16, 2020

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封装的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
比较简单的一个符合web标准的JS调用flash方法
Nov 29 Javascript
js 发个判断字符串是否为符合标准的函数
Apr 27 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
Nov 25 Javascript
javaScript 计算两个日期的天数相差(示例代码)
Dec 27 Javascript
javascript匀速运动实现方法分析
Jan 08 Javascript
Bootstrap学习笔记之js组件(4)
Jun 12 Javascript
AngularJS下对数组的对比分析
Aug 24 Javascript
用js实现简单算法的实例代码
Sep 24 Javascript
原生js实现吸顶效果
Mar 13 Javascript
js实现鼠标拖拽缩放div实例代码
Mar 25 Javascript
vue element自定义表单验证请求后端接口验证
Dec 11 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
Jul 27 Javascript
如何在JS文件中获取Vue组件
Sep 16 #Javascript
javascript自定义加载loading效果
Sep 15 #Javascript
图解JS原型和原型链实现原理
Sep 15 #Javascript
vue实现简单全选和反选功能
Sep 15 #Javascript
vscode 调试 node.js的方法步骤
Sep 15 #Javascript
js实现特别简单的钟表效果
Sep 14 #Javascript
仿照Element-ui实现一个简易的$message方法
Sep 14 #Javascript
You might like
PHP模拟SQL Server的两个日期处理函数
2006/10/09 PHP
php对mongodb的扩展(初出茅庐)
2012/11/11 PHP
php设置编码格式的方法
2013/03/05 PHP
PHP 5.5 创建和验证哈希最简单的方法详解
2013/11/07 PHP
php遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
访问编码后的中文URL返回404错误的解决方法
2014/08/20 PHP
Smarty中常用变量操作符汇总
2014/10/27 PHP
php自动给网址加上链接的方法
2015/06/02 PHP
PHP实现打包下载文件的方法示例
2017/10/07 PHP
yepnope.js 异步加载资源文件
2011/09/08 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
2012/07/20 Javascript
jQuery元素选择器用法实例
2014/12/23 Javascript
jQuery+Pdo编写login登陆界面
2016/08/01 Javascript
浅谈时钟的生成(js手写简洁代码)
2016/08/20 Javascript
BootStrap3中模态对话框的使用
2017/01/06 Javascript
JS实现的简单拖拽功能示例
2017/03/13 Javascript
Nuxt.js之自动路由原理的实现方法
2018/11/21 Javascript
JavaScript实现shuffle数组洗牌操作示例
2019/01/03 Javascript
[03:04]2018年度DOTA2玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
自己编程中遇到的Python错误和解决方法汇总整理
2015/06/03 Python
python在windows下创建隐藏窗口子进程的方法
2015/06/04 Python
Python中文分词实现方法(安装pymmseg)
2016/06/14 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
超实用的 30 段 Python 案例
2019/10/10 Python
python代码如何实现余弦相似性计算
2020/02/09 Python
Python Merge函数原理及用法解析
2020/09/16 Python
电子狗项圈:eDog Australia
2019/12/04 全球购物
Marc O’Polo俄罗斯官方在线商店:德国高端时尚品牌
2019/12/26 全球购物
春节超市活动方案
2014/08/14 职场文书
2015年药房工作总结
2015/04/25 职场文书
2015年教学管理工作总结
2015/05/20 职场文书
家长意见和建议怎么写
2015/06/04 职场文书
世界名著读书笔记
2015/06/25 职场文书
公司宣传语大全
2015/07/13 职场文书
导游词之山东孔庙
2019/11/04 职场文书
SpringBoot SpringEL表达式的使用
2021/07/25 Java/Android