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 相关文章推荐
JavaScript 开发中规范性的一点感想
Jun 23 Javascript
Javascript 面向对象 对象(Object)
May 13 Javascript
jquery操作对象数组元素方法详解
Nov 26 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
Feb 02 Javascript
前端分页功能的实现以及原理(jQuery)
Jan 22 Javascript
JavaScript时间戳与时间日期间相互转换
Dec 11 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
Apr 21 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
Vue2.0 实现页面缓存和不缓存的方式
Nov 12 Javascript
jquery实现聊天机器人
Feb 08 jQuery
利用Vue的v-for和v-bind实现列表颜色切换
Jul 17 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中使用Imagick读取pdf并生成png缩略图实例
2015/01/21 PHP
用 javascript 实现的点击复制代码
2007/03/24 Javascript
css把超出的部分显示为省略号的方法兼容火狐
2008/07/23 Javascript
深入理解JavaScript 闭包究竟是什么
2013/04/12 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
JavaScript学习小结(7)之JS RegExp
2015/11/29 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
2016/05/09 Javascript
jQuery CSS3自定义美化Checkbox实现代码
2016/05/12 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
2016/12/14 Javascript
vue脚手架搭建项目的兼容性配置详解
2018/07/17 Javascript
vue使用自定义指令实现拖拽
2021/01/29 Javascript
JavaScript DOM常用操作代码汇总
2020/07/03 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
2020/10/30 Javascript
vue下拉刷新组件的开发及slot的使用详解
2020/12/23 Vue.js
Python用threading实现多线程详解
2017/02/03 Python
Python读取word文本操作详解
2018/01/22 Python
Python实现时钟显示效果思路详解
2018/04/11 Python
python实现猜数字小游戏
2020/03/24 Python
Python3的介绍、安装和命令行的认识(推荐)
2018/10/20 Python
Python实现京东秒杀功能代码
2019/05/16 Python
Python编程快速上手——正则表达式查找功能案例分析
2020/02/28 Python
Python绘制全球疫情变化地图的实例代码
2020/04/20 Python
美国眼镜网站:EyeBuyDirect
2017/04/13 全球购物
Omio波兰:全欧洲低价大巴、火车和航班搜索和比价
2018/02/16 全球购物
荷兰最大的多品牌男装连锁店:Adam Brandstore
2019/12/31 全球购物
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
武汉英思工程科技有限公司–ORACLE面试测试题目
2012/04/30 面试题
如何获得EntityManager
2014/02/09 面试题
学生思想表现的评语
2014/01/30 职场文书
课堂教学改革实施方案
2014/03/17 职场文书
爱的承诺书
2015/01/20 职场文书
幼儿园教师自荐书
2015/03/06 职场文书
税务会计岗位职责
2015/04/02 职场文书
锦旗赠语
2015/06/23 职场文书
原生JS中应该禁止出现的写法
2021/05/05 Javascript
MySQL系列之二 多实例配置
2021/07/02 MySQL