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 相关文章推荐
简单JS代码压缩器
Oct 12 Javascript
JQuery中each()的使用方法说明
Aug 19 Javascript
jquery基础教程之数组使用详解
Mar 10 Javascript
IE中getElementsByName()对有些元素无效的解决方案
Sep 28 Javascript
jQuery控制div实现随滚动条滚动效果
Jun 07 Javascript
AngularJS基础 ng-class-odd 指令示例
Aug 01 Javascript
基于javascript实现的购物商城商品倒计时实例
Dec 11 Javascript
JS实现倒计时图文效果
Nov 17 Javascript
小程序绑定用户方案优化小结
May 15 Javascript
小程序实现搜索框功能
Mar 26 Javascript
Vue 权限控制的两种方法(路由验证)
Aug 16 Javascript
浅谈es6中的元编程
Dec 01 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
mysql4.1以上版本连接时出现Client does not support authentication protocol问题解决办法
2007/03/15 PHP
php实现异步数据调用的方法
2015/12/24 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
xml和web特殊字符
2009/04/28 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
2011/01/12 Javascript
jQuery学习笔记 获取jQuery对象
2012/09/19 Javascript
jQuery点击弹出下拉菜单的小例子
2013/08/01 Javascript
jquery对元素拖动排序示例
2014/01/16 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
2014/05/12 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
2015/10/14 Javascript
jQuery插件datatables使用教程
2016/04/21 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
2016/05/10 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
2016/07/14 Javascript
JavaScript prototype属性详解
2016/10/25 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
2017/02/14 Javascript
Angular在模板驱动表单中自定义校验器的方法
2017/08/09 Javascript
关于vue-router的那些事儿
2018/05/23 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
微信小程序实现分享朋友圈的图片功能示例
2019/01/18 Javascript
微信小程序动态添加和删除组件的现实
2020/02/28 Javascript
python编程实现归并排序
2017/04/14 Python
Python实现发送QQ邮件的封装
2017/07/14 Python
python实现彩色图转换成灰度图
2019/01/15 Python
使用django和vue进行数据交互的方法步骤
2019/11/11 Python
Python标准库json模块和pickle模块使用详解
2020/03/10 Python
django数据模型中null和blank的区别说明
2020/09/02 Python
CSS3.0实现霓虹灯按钮动画特效的示例代码
2021/01/12 HTML / CSS
BannerBuzz加拿大:在线定制横幅印刷、广告和标志
2020/03/10 全球购物
酒店秘书求职信范文
2014/02/17 职场文书
KTV门卫岗位职责
2014/10/09 职场文书
夫妻分居协议书范本
2014/11/28 职场文书
介绍信样本
2015/01/31 职场文书
廉政承诺书2015
2015/04/28 职场文书
关于幸福的感言
2015/08/03 职场文书
python入门之算法学习
2021/04/22 Python
教你使用pyinstaller打包Python教程
2021/05/27 Python