封装一下vue中的axios示例代码详解


Posted in Javascript onFebruary 16, 2020

在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中。他有很多优秀的特性,例如拦截请求和响应、取消请求、转换json、客户端防御cSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护,直接推荐我们使用axios库。如果还对axios不了解的,可以移步axios文档。

安装

npm install axios; // 安装axios

好了,下面开始今天的正文。

此次封装用以解决: (对于登录功能的可以直接使用,其他网络请求也可以直接用,如果有洁癖,可以把token有关的几行代码删掉)

ps:使用时得的引入axios时: import axios from '这个文件的名字及相对路径'

  • 接受后台token
  • post参数自动转换,省略qs.stringify()
  • 后台token过期之后自动清除本地数据,以便下次再次输入账号密码
  • 更好的错误提示信息
/**
 * 封装网络请求
 */
import axios from "axios"
import qs from "querystring"
import store from '../store'
import router from '../router'
//token过期之后重新回登录界面
const toLogin = () =>{
 router.push("/login")
}
// 错误信息响应方法
const errroHandle = (status,other) => {
 switch(status){
  case 400:
   console.log("服务器无法理解请求信息");
   break;
  case 401:
   console.log("用户信息验证失败");
   localStorage.removeItem("token"); // 可选项
   toLogin();
   break;
  case 403:
   console.log("请求被限制");
   localStorage.removeItem("token"); // 可选项
   toLogin();
   break;
  case 404:
   console.log("客户端请求信息错误");
   break;
  default:
   console.log(other);
   break;
 }
}
// 创建axios对象
const instance = axios.create({
 timeout:5000
})
// 挂在全局对象
instance.defaults.baseUrl = "";
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// 拦截器:请求拦截和响应拦截 post请求参数需要转码
// axios的返回值对象要求是一个promise对象
instance.interceptors.request.use(config =>{
 if(config.method === "post"){
  config.data = qs.stringify(config.data)
 }
 if(store.state.token){
  config.headers.authorization = store.state.token;
 }
 return config;
},error => Promise.reject(error))
instance.interceptors.response.use(
 // 成功
 response => response.status === 200 ? Promise.resolve(response) :Promise.reject(response),
 // 失败
 error => {
  const { response } = error;
  if(response){
   errroHandle(response.status,response.data)
   return Promise.reject(response)
  }else{
   // 错误信息都无法返回
   console.log("请求被中断");
  }
 }
)
export default instance

总结

以上所述是小编给大家介绍的封装一下vue中的axios示例代码详解,希望对大家有所帮助!

Javascript 相关文章推荐
jquery判断checkbox(复选框)是否被选中的代码
Oct 20 Javascript
js操作textarea 常用方法总结
Dec 03 Javascript
JS链式调用的实现方法
Mar 07 Javascript
原生js做的手风琴效果的导航菜单
Nov 08 Javascript
jquery实现可拖动DIV自定义保存到数据的实例
Nov 20 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
Nov 04 Javascript
关于JS中的apply,call,bind的深入解析
Apr 05 Javascript
jQuery实现区域打印功能代码详解
Jun 17 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
详解vue项目打包后通过百度的BAE发布到网上的流程
Mar 05 Javascript
js实现同一个页面,多个enter事件绑定的示例
Oct 10 Javascript
详解微信小程序开发(项目从零开始)
Jun 06 Javascript
Vue.js的模板语法详解
Feb 16 #Javascript
Vue两个版本的区别和使用方法(更深层次了解)
Feb 16 #Javascript
vue数据响应式原理知识点总结
Feb 16 #Javascript
vue中利用iscroll.js解决pc端滚动问题
Feb 15 #Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
Feb 15 #Javascript
ES6 proxy和reflect的使用方法与应用实例分析
Feb 15 #Javascript
js表达式与运算符简单操作示例
Feb 15 #Javascript
You might like
PHP中的串行化变量和序列化对象
2006/09/05 PHP
php下网站防IP攻击代码,超级实用
2010/10/24 PHP
腾讯QQ微博API接口获取微博内容
2013/10/30 PHP
PHP+Ajax检测用户名或邮件注册时是否已经存在实例教程
2014/08/23 PHP
Yii框架获取当前controlle和action对应id的方法
2014/12/03 PHP
php生成二维码时出现中文乱码的解决方法
2014/12/18 PHP
php app支付宝回调(异步通知)详解
2018/07/25 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
php解决约瑟夫环算法实例分析
2019/09/30 PHP
免费空间广告万能消除代码
2006/09/04 Javascript
JS+css 图片自动缩放自适应大小
2013/08/08 Javascript
JS传值出现中文参数乱码的解决方法
2016/06/30 Javascript
AngularJS 面试题集锦
2016/09/06 Javascript
NodeJS自定义模块写法(详解)
2017/06/27 NodeJs
Node.js使用gm拼装sprite图片
2017/07/04 Javascript
React-Native中props具体使用详解
2017/09/04 Javascript
基于Webpack4和React hooks搭建项目的方法
2019/02/05 Javascript
Vue 无限滚动加载指令实现方法
2019/05/28 Javascript
Electron 调用命令行(cmd)
2019/09/23 Javascript
Vue.js实现立体计算器
2020/02/22 Javascript
[01:24:09]Ti4 冒泡赛第二轮DK vs C9 1
2014/07/14 DOTA
Python解释执行原理分析
2014/08/22 Python
python进程管理工具supervisor使用实例
2014/09/17 Python
Python中unittest用法实例
2014/09/25 Python
使用Python的Flask框架实现视频的流媒体传输
2015/03/31 Python
python3实现公众号每日定时发送日报和图片
2018/02/24 Python
Python嵌入C/C++进行开发详解
2020/06/09 Python
python如何提升爬虫效率
2020/09/27 Python
银行实习生的自我评价
2013/12/09 职场文书
保险公司早会主持词
2014/03/22 职场文书
试用期员工工作自我评价
2014/09/10 职场文书
支部书记四风问题自我剖析材料
2014/09/29 职场文书
开展批评与自我批评心得体会
2014/10/17 职场文书
推销搭讪开场白
2015/05/28 职场文书
2016年小学生新年寄语
2015/08/18 职场文书
疑《守望先锋2》A测截图泄露 或将推出新模式、新界面
2022/04/03 其他游戏