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 document.createDocumentFragment()
Apr 04 Javascript
JQuery+DIV自定义滚动条样式的具体实现
Jun 25 Javascript
js实现点击左右按钮轮播图片效果实例
Jan 29 Javascript
使用纯javascript实现放大镜效果
Mar 18 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
Jan 26 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
Jun 17 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
Jul 13 Javascript
JavaScript 拖拽实例代码
Sep 21 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
Nov 09 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
Jun 14 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
Feb 21 Javascript
JQuery省市联动效果实现过程详解
May 08 jQuery
基于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
简单介绍下 PHP5 中引入的 MYSQLI的用途
2007/03/19 PHP
Laravel 加载第三方类库的方法
2018/04/20 PHP
PHP操作Redis数据库常用方法示例
2018/08/25 PHP
PHP实现的操作数组类库定义与用法示例
2019/05/24 PHP
yii2.0框架场景的简单使用示例
2020/01/25 PHP
js下用层来实现select的title提示属性
2010/02/23 Javascript
原生javaScript做得动态表格(注释写的很清楚)
2013/12/29 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
2015/03/03 Javascript
jQuery简单tab切换效果实现方法
2015/04/08 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
2016/07/07 Javascript
JS生成不重复的随机数组的简单实例
2016/07/10 Javascript
微信小程序 Flex布局详解
2016/10/09 Javascript
深入理解node.js之path模块
2017/05/03 Javascript
JavaScript之DOM_动力节点Java学院整理
2017/07/03 Javascript
vue-resouce设置请求头的三种方法
2017/09/12 Javascript
Python存取XML的常见方法实例分析
2017/03/21 Python
python取代netcat过程分析
2018/02/10 Python
python 格式化输出百分号的方法
2019/01/20 Python
python 整数越界问题详解
2019/06/27 Python
opencv导入头文件时报错#include的解决方法
2019/07/31 Python
python3 图片 4通道转成3通道 1通道转成3通道 图片压缩实例
2019/12/03 Python
如何让python的运行速度得到提升
2020/07/08 Python
CSS3新增布局之: flex详解
2020/06/18 HTML / CSS
Booking.com荷兰:全球酒店网上预订
2017/08/22 全球购物
前台接待员岗位职责
2014/01/02 职场文书
给校长的建议书300字
2014/05/16 职场文书
酒店管理求职信
2014/06/09 职场文书
2014最新房贷收入证明范本
2014/09/12 职场文书
法人委托书范本格式
2014/09/15 职场文书
2015年度保密工作总结
2015/04/24 职场文书
甲午风云观后感
2015/06/02 职场文书
小爸爸观后感
2015/06/15 职场文书
2016继续教育培训学习心得体会
2016/01/19 职场文书
课文《燕子》教学反思
2016/02/17 职场文书
浅谈Golang 嵌套 interface 的赋值问题
2021/04/29 Golang
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python