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 相关文章推荐
脚本收藏iframe
Jul 21 Javascript
基于JQuery的Select选择框的华丽变身
Aug 23 Javascript
JS将表单导出成EXCEL的实例代码
Nov 11 Javascript
JavaSript中变量的作用域闭包的深入理解
May 12 Javascript
通用无限极下拉菜单的实现代码
May 31 Javascript
JavaScript实现通过select标签跳转网页的方法
Sep 29 Javascript
微信小程序 引用其他js文件实现代码
Feb 22 Javascript
深究AngularJS中ng-drag、ng-drop的用法
Jun 12 Javascript
微信小程序调用PHP后台接口 解析纯html文本
Jun 13 Javascript
JavaScript 下载svg图片为png格式
Jun 21 Javascript
vue.js中导出Excel表格的案例分析
Jun 11 Javascript
vue移动端下拉刷新和上滑加载
Oct 27 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
杏林同学录(六)
2006/10/09 PHP
PHP 彩色文字实现代码
2009/06/29 PHP
让你成为更出色的PHP开发者的10个技巧
2011/02/25 PHP
DOM基础及php读取xml内容操作的方法
2015/01/23 PHP
Symfony数据校验方法实例分析
2015/01/26 PHP
深入理解PHP类的自动载入机制
2016/09/16 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
选择器中含有空格在使用示例及注意事项
2013/07/31 Javascript
JQuery之focus函数使用介绍
2013/08/20 Javascript
解析JavaScript中的不可见数据类型
2013/12/02 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
2015/06/23 Javascript
javascript如何创建对象
2016/08/29 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
bootstrap手风琴折叠示例代码分享
2017/05/22 Javascript
jQuery列表检索功能实现代码
2017/07/17 jQuery
浅谈webpack打包之后的文件过大的解决方法
2018/03/07 Javascript
vue下拉列表功能实例代码
2018/04/08 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
nodejs中函数的调用实例详解
2018/10/31 NodeJs
Vue服务端渲染实践之Web应用首屏耗时最优化方案
2019/03/22 Javascript
深入理解es6块级作用域的使用
2019/03/28 Javascript
vue.js 解决v-model让select默认选中不生效的问题
2020/07/28 Javascript
[04:19]完美世界携手游戏风云打造 卡尔工作室模型介绍篇
2013/04/24 DOTA
[01:45]典藏宝瓶2+祈求者身心——这就是DOTA2TI9总奖金突破3000万美元的秘密
2019/07/21 DOTA
Python实现获取前100组勾股数的方法示例
2018/05/04 Python
python计算两个矩形框重合百分比的实例
2018/11/07 Python
python如何给字典的键对应的值为字典项的字典赋值
2019/07/05 Python
python numpy之np.random的随机数函数使用介绍
2019/10/06 Python
tensorflow如何继续训练之前保存的模型实例
2020/01/21 Python
Python使用GitPython操作Git版本库的方法
2020/02/29 Python
python 实时调取摄像头的示例代码
2020/11/25 Python
合作协议书模板
2014/10/10 职场文书
酒店宣传语大全
2015/07/13 职场文书
机关干部纪律作风整顿心得体会
2016/01/23 职场文书
Python机器学习之PCA降维算法详解
2021/05/19 Python
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS