vue中axios 配置请求拦截功能 及请求方式如何封装
main.js 中:
import axios from '................/axios'
axios.js 中:
//axios.js
import Vue from 'vue'
import axios from 'axios'
Vue.prototype.$http = axios //http request 封装请求头拦截器
axios.interceptors.request.use(config => {
// console.log("request")
// console.log(config) //请求方式
let method = config.method.toLowerCase();
if (method === 'get' || method === 'delete') {
Object.assign(config.params, {
"test": "testVAl"
});
}
return config;
}, error => {
return Promise.reject(err);
}); //http response 封装后台返回拦截器
axios.interceptors.response.use(response => {
// console.log(response)
//当返回信息为未登录或者登录失效的时候重定向为登录页面
// if (response.data.code == 'W_100004' || response.data.message == '用户未登录或登录超时,请登录!') {
// router.push({
// path: "/",
// querry: {
// redirect: router.currentRoute.fullPath
// } //从哪个页面跳转
// })
// }
if (typeof response.data === 'string') {
return JSON.parse(response.data);
} else {
return response;
}
}, error => {
return Promise.reject(error)
});
使用:
this.$http.get('/api/......', {params:{}}).then(res => {
console.log(res)
}, res => {
// error callback
});
vue中axios 配置请求拦截功能 及请求方式如何封装的更多相关文章
- vue中axios配置代理的俩种方式及优缺点
概述:Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中 当我们使用vue向服务器发送AJAX请求时,我们会遇到跨域问题,一般跨域的解决方案有俩种,一种是官 ...
- vue中axios的安装使用
axios是一个基于 promise 的 HTTP 库,在vue中axios是比较常用的网络请求方法. 安装 npm install axios -S 在main.js配置 import axios ...
- vue中Axios请求豆瓣API数据并展示到Swipe中
vue中Axios请求豆瓣API数据并展示到Swipe中 1.首先是安装Axios: 安装方法cnpm install axios --save 等待npm安装完毕: 2.在main.js中引入axi ...
- vue中axios使用二:axios以post,get,jsonp的方式请求后台数据
本文为博主原创,转载请注明出处 axios在上一篇中讲过:vue中axios使用一:axios做拦截器,axios是请求后台资源的模块,用来请求后台资源. axios本身是支持get,post请求后台 ...
- vue中Axios的封装和API接口的管理
前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习.如果对原博主造成侵犯,我会立即删除. 转载地址:点击查看 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题 ...
- 聊聊 Vue 中 axios 的封装
聊聊 Vue 中 axios 的封装 axios 是 Vue 官方推荐的一个 HTTP 库,用 axios 官方简介来介绍它,就是: Axios 是一个基于 promise 的 HTTP 库,可以用在 ...
- Vue中axios的封装和api接口的统一管理
更新的是我csdn上的文章,需要的话可以看下,互相学习点击去我的csdn vue中axios的封装 在vue项目和后端交互获取数据时,通常使用axios库,官方文档:https://www.npmjs ...
- vue中axios的深入使用
如上所示一条简单的请求数据,用到了vue中axios,promise,qs等等 这里我将vue中用到的axios进行了封装方便日后使用 先对工具类进行封装utils/axios.js: // 引入模 ...
- vue中怎样实现 路由拦截器
vue中怎样实现 路由拦截器(当用户没有登录的时候,跳转到登录页面,已经登录的时候,不能跳转到登录页,除非后台token失效) 在 我们需要实现这样 一个功能,登录拦截 其实就是 路由拦截,首先在定义 ...
随机推荐
- HR_Sherlock and Anagrams_TIMEOUT[UNDONE]
2019年1月10日15:39:23 去掉了所有不必要的循环区间 还是超时 本地运行大概3s #!/bin/python3 import math import os import random im ...
- zookeeper部署
版本:zookeeper-3.4.5-cdh5.10.0.tar.gz 网址:http://archive-primary.cloudera.com/cdh5/cdh/5/ 1. 解压 $ tar - ...
- wampserver安装之后出现“无法启动,因为计算机中丢失了msvr110.dll”
1.是因为计算机缺失包所致,我的解决办法是安装一个包来解决. 2.网址如下:下载网址 3.下载完之后,然后安装就是(根据自己的系统版本来选择合适的安装版本).
- 网页发起qq临时会话
qq官方:http://shang.qq.com/v3/widget.html
- js 表单提交
方式一: 使用input type="submit" 提交 <form action="http://www.w3school.com.cn/tiy/loadtex ...
- 洛谷 P2158 仪仗队
欧拉函数入门题... 当然如果有兴趣也可以用反演做...类似这题 题意就是求,方阵从左下角出发能看到多少个点. 从0开始给坐标 发现一个点能被看到,那么横纵坐标互质. 然后求欧拉函数的前缀和,* 2 ...
- linux 日常中会用到的命令(持续更新)
1. grep 比如,我要查看www目录下所有包含 “聊天室” 的文件 grep -rn "聊天室" * 比如我要把 www 目录下所有文件中的 聊天室 替换为 ...
- 【译】5. Java反射——方法
原文地址:http://tutorials.jenkov.com/java-reflection/methods.html ====================================== ...
- Contest1593 - 2018-2019赛季多校联合新生训练赛第三场(部分题解)
H 10255 自然数无序拆分 H 传送门 题干: 题目描述 美羊羊给喜羊羊和沸羊羊出了一道难题,说谁能先做出来,我就奖励给他我自己做的一样礼物.沸羊羊这下可乐了,于是马上答应立刻做出来,喜羊羊见状, ...
- macs安卓工程创建
第一个 1.创建工程后先修改xml文件. 然后主程序中编写代码. center :如果图片比imageview大则显示中片中心部分 image大小 把view填满 匹配父控件 ,父控件多大它就多大. ...