Vue项目中如何使用Axios封装http请求详解


Posted in Javascript onOctober 23, 2019

前言

使用axios可以统一做请求响应拦截,例如请求响应时我们拦截响应信息,判断状态码,从而弹出报错信息。请求超时的时候断开请求,还可以很方便地使用then或者catch来处理请求。

安装

npm install axios --save

建立http.js文件

在/src/utils/目录下建立一个htttp.js

1.首先导入axios和router。

import axios from 'axios';
import router from '../router';

2.接着设置axios请求参数。

axios.defaults.timeout = 5000; //请求超时5秒
axios.defaults.baseURL =''; //请求base url
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; //设置post请求是的header信息

如果你要用到session验证码功能,让请求携带cookie,可以加上以下一行:

axios.defaults.withCredentials = true

3.然后,我们要给请求加个拦截器,就是在请求即将发送之前,我们需要给请求添加信息,比如下面的代码中,我们给请求添加header信息,header中添加token,这样每次请求都会在header中携带token信息。这在我们的接口开发中经常用到。

//http request 拦截器
axios.interceptors.request.use(
 config => {
 let token = sessionStorage.getItem('token')
 if (token) { // 判断是否存在token,如果存在的话,则每个http header都加上token
  config.headers = {
  'X-token': token
  }
 }
 
 return config
 }, 
 err => {
 return Promise.reject(err)
 }
)

4.接下来,我们看下请求返回时的拦截器。

比如我们发送请求时,如果后端返回错误代码,则前端应该提示信息。比如后台返回没有权限,不允许访问,跳转到登录页,这些都可在拦截器上完成。

axios.interceptors.response.use(
 response => {
 if (response.data.code === 4003) {
  Toast({
  mes: '您没有权限操作!',
  timeout: 1500,
  callback: () => {
   router.go(-1);
  }
  });
  
  return false;
 }
 if (response.data.code === -1) {
  localStorage.removeItem('token')
  router.push({
  path:"/login",
  querry:{redirect: router.currentRoute.fullPath}//从哪个页面跳转
  })
 }
 return response
 }, 
 err => {
 if (err.code === 'ECONNABORTED' && err.message.indexOf('timeout') !== -1) {
  Toast({
   mes: '网络异常,连接超时...',
   timeout: 1500
  });
 }
 return Promise.reject(err)
 }
)

5.现在我们来封装一个get方法:

/**
 * 封装get方法
 * @param url
 * @param data
 * @returns {Promise}
 */

export function get(url, params={}, headers={}){
 return new Promise((resolve, reject) => {
 axios.get(url,{
  params: params,
  headers: headers
 })
 .then(response => {
  resolve(response.data);
 })
 .catch(err => {
  reject(err)
 })
 })
}

6.再封装一个post方法:

/**
 * 封装post请求
 * @param url
 * @param data
 * @returns {Promise}
 */

 export function post(url, data = {}){
 return new Promise((resolve, reject) => {
  axios.post(url, data)
  .then(response => {
  resolve(response.data);
  }, err => {
  reject(err)
  })
 })
 }

使用

在main.js中引入:

import {post,get} from './utils/http'
//定义全局变量
Vue.prototype.$post = post;
Vue.prototype.$get = get;

在组件中使用:

this.$post(url, params)
 .then((res) => {
 if (res.result === 'success') {
  this.$message({
  message: '登录成功!',
  type: 'success'
  })
  this.$router.push('/main')
 } else {
  this.$message.error(res.msg)
  this.refreshCode();
 }
 });

这段代码是用户登录发送post请求的代码示例,其他get请求也是一样的处理方式。接下来我们会有文章具体讲解如何使用封装好的axios实现登录的例子,敬请关注。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JQuery从头学起第二讲
Jul 04 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
Sep 22 Javascript
JavaScript中exec函数用法实例分析
Jun 08 Javascript
jQuery EasyUI Dialog拖不下来如何解决
Sep 28 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
Dec 29 Javascript
javascript点击按钮实现隐藏显示切换效果
Feb 03 Javascript
javascript简单判断输入内容是否合法的方法
May 11 Javascript
详解Javascript中的原型OOP
Oct 12 Javascript
Javascript中关于Array.filter()的妙用详解
Dec 04 Javascript
layui框架table 数据表格的方法级渲染详解
Aug 19 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
Sep 10 Javascript
JS canvas实现画板和签字板功能
Feb 23 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
Oct 23 #Javascript
原生JS无缝滑动轮播图
Oct 22 #Javascript
Vue实现开心消消乐游戏算法
Oct 22 #Javascript
p5.js码绘“跳动的小正方形”的实现代码
Oct 22 #Javascript
微信小程序绑定手机号获取验证码功能
Oct 22 #Javascript
微信小程序开发之转发分享功能
Oct 22 #Javascript
微信小程序转发事件实现解析
Oct 22 #Javascript
You might like
PHP脚本的10个技巧(7)
2006/10/09 PHP
PHP迭代器实现斐波纳契数列的函数
2013/11/12 PHP
Zend Framework页面缓存实例
2014/06/25 PHP
PHP调用wsdl文件类型的接口代码分享
2014/11/19 PHP
ThinkPHP V2.2说明文档没有说明的那些事实例小结
2015/07/01 PHP
Symfony实现行为和模板中取得request参数的方法
2016/03/17 PHP
解密效果
2006/06/23 Javascript
用正则xmlHttp实现的偷(转)
2007/01/22 Javascript
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
jquery 插件学习(一)
2012/08/06 Javascript
javascript 实现字符串反转的三种方法
2013/11/23 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
2014/05/28 Javascript
javascript十六进制及二进制转化的方法
2015/05/06 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
2015/10/30 Javascript
JS实现图片剪裁并预览效果
2016/08/12 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
2017/02/14 Javascript
async/await与promise(nodejs中的异步操作问题)
2017/03/03 NodeJs
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
2017/06/20 Javascript
浅谈angular4生命周期钩子
2017/09/05 Javascript
详解使用PM2管理nodejs进程
2017/10/24 NodeJs
vue2.0 常用的 UI 库实例讲解
2017/12/12 Javascript
js中bool值的转换及“&&”、“||”、 “!!”详解
2017/12/21 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
2019/03/06 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
2020/07/19 Javascript
Python Web框架Flask中使用百度云存储BCS实例
2015/02/08 Python
Python Socket传输文件示例
2017/01/16 Python
3分钟学会一个Python小技巧
2018/11/23 Python
对于Python深浅拷贝的理解
2019/07/29 Python
PHP基于phpqrcode类库生成二维码过程解析
2020/05/28 Python
金融专业推荐信
2013/11/14 职场文书
婚假请假条格式及范文
2014/04/10 职场文书
促销活动总结怎么写
2014/06/25 职场文书
Spring this调用当前类方法无法拦截的示例代码
2022/03/20 Java/Android
《金肉人》米特&《航海王》阿鹤声优松岛实因胰脏癌去世 享寿81岁
2022/04/13 日漫
基于docker安装zabbix的详细教程
2022/06/05 Servers
Python可视化神器pyecharts绘制水球图
2022/07/07 Python