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 相关文章推荐
在 IE 中调用 javascript 打开 Excel 表
Dec 21 Javascript
jQuery截取指定长度字符串的实现原理及代码
Jul 01 Javascript
angularjs指令中的compile与link函数详解
Dec 06 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
Jun 29 Javascript
使用jquery.qrcode.js生成二维码插件
Oct 17 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
Dec 08 Javascript
DWR3 访问WEB元素的两种方法实例详解
Jan 03 Javascript
js 实现省市区三级联动菜单效果
Feb 20 Javascript
Js实现中国公民身份证号码有效性验证实例代码
May 03 Javascript
vue父子组件的嵌套的示例代码
Sep 08 Javascript
vue.js实现双击放大预览功能
Jun 23 Javascript
JavaScript数组类型Array相关的属性与方法详解
Sep 08 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开发注意事项总结
2015/02/04 PHP
PHP中set error handler函数用法小结
2015/11/11 PHP
详解PHP实现定时任务的五种方法
2016/07/25 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
彻底搞懂PHP 变量结构体
2017/10/11 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
php5.5使用PHPMailer-5.2发送邮件的完整步骤
2018/10/14 PHP
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
2010/05/10 Javascript
jquery 学习之二 属性 文本与值(text,val)
2010/11/25 Javascript
VS2008中使用JavaScript调用WebServices
2014/12/18 Javascript
jQuery实现背景滑动菜单
2016/12/02 Javascript
JS实现浏览器打印、打印预览示例
2017/02/28 Javascript
关于Angular2 + node接口调试的解决方案
2017/05/28 Javascript
Vue实现一个返回顶部backToTop组件
2017/07/25 Javascript
微信小程序自动客服功能
2017/11/02 Javascript
简述Angular 5 快速入门
2017/11/04 Javascript
详解搭建一个vue-cli的移动端H5开发模板
2020/01/17 Javascript
使用vue cli4.x搭建vue项目的过程详解
2020/05/08 Javascript
如何在JavaScript中等分数组的实现
2020/12/13 Javascript
[00:56]跨越时空加入战场 全新祈求者身心“失落奇艺侍祭”展示
2019/07/20 DOTA
Python数据分析:手把手教你用Pandas生成可视化图表的教程
2018/12/15 Python
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
在Python运行时动态查看进程内部信息的方法
2019/02/22 Python
pandas之分组groupby()的使用整理与总结
2020/06/18 Python
css3使网页、图片变成灰色兼容大多数浏览器
2014/07/02 HTML / CSS
详解rem 适配布局
2018/10/31 HTML / CSS
巴西电子、家电、智能手机购物网站:Girafa
2019/06/04 全球购物
单位授权委托书范文
2014/08/02 职场文书
标准版离职证明书
2014/09/12 职场文书
国际残疾人日广播稿范文
2014/10/09 职场文书
2014离婚协议书范文(3篇)
2014/11/29 职场文书
运动会广播稿200字
2015/08/19 职场文书
聘任合同书
2015/09/21 职场文书
AJAX实现指定部分页面刷新效果
2021/10/16 Javascript
springboot 多数据源配置不生效遇到的坑及解决
2021/11/17 Java/Android