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 相关文章推荐
一端时间轮换的广告
Jun 26 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
Jan 13 Javascript
Javascript中valueOf与toString区别浅析
Mar 19 Javascript
node.js中Socket.IO的进阶使用技巧
Nov 04 Javascript
12306验证码破解思路分享
Mar 25 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
Mar 27 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
Jan 04 Javascript
浅谈js for循环输出i为同一值的问题
Mar 01 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
Apr 11 Javascript
详谈angularjs中路由页面强制更新的问题
Apr 24 Javascript
JavaScript面向对象精要(下部)
Sep 12 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
Nov 05 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编码规范之注释和文件结构说明
2010/07/09 PHP
使用php伪造referer的方法 利用referer防止图片盗链
2014/01/20 PHP
PHP批量生成静态HTML的简单原理和方法
2014/04/20 PHP
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
纯php生成随机密码
2015/10/30 PHP
CI框架源码解读之利用Hook.php文件完成功能扩展的方法
2016/05/18 PHP
php单链表实现代码分享
2016/07/04 PHP
Gird组件 Part-3:范例RSSFeed Viewer
2007/03/10 Javascript
javascript 操作select下拉列表框的一点小经验
2010/03/20 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
2013/05/30 Javascript
JS字符串截取函数实例
2013/12/27 Javascript
Node.js插件的正确编写方式
2014/08/03 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
2014/10/17 Javascript
Web Uploader文件上传插件使用详解
2016/05/10 Javascript
玩转JavaScript OOP - 类的实现详解
2016/06/08 Javascript
Jquery基础之事件操作详解
2016/06/14 Javascript
node网页分段渲染详解
2016/09/05 Javascript
jQuery实现的导航下拉菜单效果示例
2016/09/05 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
2016/12/13 Javascript
Angular利用trackBy提升性能的方法
2018/01/26 Javascript
解决使用vue.js路由后失效的问题
2018/03/17 Javascript
jQuery子选择器与可见性选择器实例分析
2019/06/28 jQuery
JS可断点续传文件上传实现代码解析
2020/07/30 Javascript
简单易懂的python环境安装教程
2017/07/13 Python
详解Python 数据库的Connection、Cursor两大对象
2018/06/25 Python
python的pyecharts绘制各种图表详细(附代码)
2019/11/11 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
电大自我鉴定
2013/10/27 职场文书
《油菜花开了》教学反思
2014/02/22 职场文书
乔丹名人堂演讲稿
2014/05/24 职场文书
售房协议书
2014/08/19 职场文书
普通党员个人剖析材料
2014/10/08 职场文书
销售会议开幕词
2016/03/04 职场文书
Python爬虫之爬取最新更新的小说网站
2021/05/06 Python
关于 Python json中load和loads区别
2021/11/07 Python
浅析JavaScript中的变量提升
2022/06/01 Javascript