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 相关文章推荐
jQuery 开天辟地入门篇一
Dec 09 Javascript
js检查页面上有无重复id的实现代码
Jul 17 Javascript
javascript页面上使用动态时间具体实现
Mar 18 Javascript
jQuery中 attr() 方法使用小结
May 03 Javascript
JS获取复选框的值,并传递到后台的实现方法
May 30 Javascript
微信小程序 删除项目工程实现步骤
Nov 10 Javascript
jQuery删除当前节点元素
Dec 07 Javascript
js实现简易聊天对话框
Aug 17 Javascript
ES10的13个新特性示例(小结)
Sep 23 Javascript
Vue插件之滑动验证码用法详解
Apr 05 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
Oct 09 Javascript
vue实现锚点定位功能
Jun 29 Vue.js
如何在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
smarty模板引擎中变量及变量修饰器用法实例
2015/01/22 PHP
Yii视图CGridView实现操作按钮定义地址示例
2016/07/14 PHP
CakePHP框架Session设置方法分析
2017/02/23 PHP
PHP通过调用新浪API生成t.cn格式短网址链接的方法详解
2019/02/20 PHP
javascript生成/解析dom的CDATA类型的字段的代码
2007/04/22 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
2011/07/04 Javascript
基于jquery tab切换(防止页面刷新)
2012/05/23 Javascript
PHP实现的各种中文编码转换类分享
2015/01/23 Javascript
jquery插件uploadify实现带进度条的文件批量上传
2015/12/13 Javascript
基于jQuery实现音乐播放试听列表
2016/04/14 Javascript
实例分析nodejs模块xml2js解析xml过程中遇到的坑
2017/03/18 NodeJs
深入浅析Node.js单线程模型
2017/07/10 Javascript
js实现图片放大并跟随鼠标移动特效
2019/01/18 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
2019/09/25 Javascript
JavaScript闭包相关知识解析
2019/10/19 Javascript
环形加载进度条封装(Vue插件版和原生js版)
2019/12/04 Javascript
在Echarts图中给坐标轴加一个标识线markLine
2020/07/20 Javascript
Vue实现简易购物车页面
2020/12/30 Vue.js
[50:04]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第二局
2016/02/28 DOTA
python动态加载包的方法小结
2016/04/18 Python
Python实现简单网页图片抓取完整代码实例
2017/12/15 Python
Numpy array数据的增、删、改、查实例
2018/06/04 Python
Python设计模式之代理模式实例详解
2019/01/19 Python
Anaconda3+tensorflow2.0.0+PyCharm安装与环境搭建(图文)
2020/02/18 Python
python属于解释型语言么
2020/06/15 Python
python破解同事的压缩包密码
2020/10/14 Python
详解pandas映射与数据转换
2021/01/22 Python
美国名牌香水折扣网站:Hottperfume
2021/02/10 全球购物
NULL是什么,它是怎么定义的
2015/05/09 面试题
几道Web/Ajax的面试题
2016/11/05 面试题
哈理工毕业生的求职信
2013/12/22 职场文书
电工技术比武方案
2014/05/11 职场文书
技术负责人任命书
2014/06/05 职场文书
2014年团支书工作总结
2014/11/14 职场文书
《游戏公平》教学反思
2016/02/20 职场文书
MySQL表字段数量限制及行大小限制详情
2022/07/23 MySQL