vue封装axios
一、安装axios npm install --save axios
二、在src下面创建文件夹api=>api.js(接口集合)+http.js(封装的请求)
三、在main.js中引用api.js和http.js
//引入两个文件
import api from './api/api'
import http from './api/http'
//挂载到VUE实例,以便全局使用
Vue.prototype.api = api;
Vue.prototype.http = http;
四、开始在http.js中写方法
import axios from 'axios';
import { Message } from 'element-ui';
let localhosts = 'http://www.xxx.com'; //请求的后台域名
axios.interceptors.request.use(config => {//请求之前(可以设置token)
return config
},error =>{
Message.error(error)
return Promise.reject(error);
});
axios.interceptors.response.use(response => {//数据拿到之后
return response.data
},error => {
Message.error('Http请求失败,请联系管理员');
return Promise.reject(error.response);;
});
function successfun(res){//处理后台返回的非200错误
if(res.code === 200){
return res
}else{
Message.warning(res.message);
return res;
}
}
function errorfun(res){
if(res.code != 200){
Message.error(res.message);
return res;
}
}
export default{
post(url,data){//post请求
return axios({
method:'post',
baseURL:localhosts,
url,
data: data,
withCredentials: true,
timeout:5000,//响应时间
}).then(res => {
return successfun(res)
},err => {
return errorfun(err);
})
},
get(url,params){//get请求
return axios({
method:'get',
baseURL:localhosts,
url,
params,
withCredentials: true,
timeout:5000,
}).then(res => {
return successfun(res)
},err => {
return errorfun(err)
})
}
//(delete,put等请求同上)...
}
五、写api.js
export default {
login: "/login",
}
六、使用
<script>
import Vue from 'vue'
export default {
data () {
return { }
},
created():{
this.http.get(this.api.login)
.then(res => {
if(res.code == 200){
this.info = res.data.list
this.page = res.data
}
});
},
}
</script>
需要配置生产环境、测试环境、生产环境请移步 vue cli3配置
vue封装axios的更多相关文章
- Vue 封装axios(四种请求)及相关介绍(十三)
Vue 封装axios(四种请求)及相关介绍 首先axios是基于promise的http库 promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的 ...
- vue 封装axios以及使用中间代理 proxy
为什么需要封装呢?主要是为了更好管理项目以及增加复用性 1.首先在src文件夹下创建api文件夹 . utils文件夹 . server文件夹 api:创建一个index.js文件 用来存放接口地 ...
- vue 封装 axios 和 各类的请求,以及引入 .vue 文件中使用
//src 底下建立 api 文件夹 // api 文件夹下建立 request,js 文件,文件内容复制下面这段代码即可 /** * ajax请求配置 */ import axios fro ...
- vue封装axios方法推荐)
目录结构: api.js export default { myTopic: '/api/subscribe-data/post/cat' } request.js import axios from ...
- Vue 给axios做个靠谱的封装(报错,鉴权,跳转,拦截,提示)
需求及实现 统一捕获接口报错 弹窗提示 报错重定向 基础鉴权 表单序列化 用法及封装 用法 // 服务层 , import默认会找该目录下index.js的文件,这个可能有小伙伴不知道可以去了解npm ...
- vue中axios 配置请求拦截功能 及请求方式如何封装
main.js 中: import axios from '................/axios' axios.js 中: //axios.js import Vue from 'vue' i ...
- vue中Axios的封装和API接口的管理
前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习.如果对原博主造成侵犯,我会立即删除. 转载地址:点击查看 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题 ...
- 【转】Vue 2.0封装axios笔记
前言 单页面应用大多采用前后端分离开发思路,我们知道,前端和后端交互有多中方式(服务器端渲染.Ajax.websocket等),今天我们主要讲解Ajax部分. 最近团队讨论了一下,Ajax 本身跟 V ...
- Vue笔记:封装 axios 为插件使用
前言 自从Vue2.0推荐大家使用 axios 开始,axios 被越来越多的人所了解.使用axios发起一个请求对大家来说是比较简单的事情,但是axios没有进行封装复用,项目越来越大,引起的代码冗 ...
随机推荐
- WiredTiger运行时参数优化
MongoDB的WiredTiger存储引擎,用了一段时间,遇到了一些问题,通过优化WT参数,也解决了一些问题,做个小结. cache_size 指定WT存储引擎内部cache的内存用量上限. 需要注 ...
- 初识SpringAOP
概述 AOP(Aspect Oriented Programming),即面向切面编程 通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.AOP是OOP的延伸,是软件系统开发中的一个 ...
- LeetCode~1033.移动石子直到连续
1033.移动石子直到连续 三枚石子放置在数轴上,位置分别为 a,b,c. 每一回合,我们假设这三枚石子当前分别位于位置 x, y, z 且 x < y < z.从位置 x 或者是位置 z ...
- 先搞清楚这些问题,简历上再写你熟悉Java!
原创声明 本文作者:黄小斜 转载请务必在文章开头注明出处和作者. 系列文章介绍 本文是<五分钟学Java>系列文章的一篇 本系列文章主要围绕Java程序员必须掌握的核心技能,结合我个人三年 ...
- nginx 命令行参数 启动 重启 重载 停止
今天和大家分享关于 nginx 的一些参数使用 首先,你应该安装了nginx CentOS 安装 nginx 这是很早之前的一篇博客,可以参考. 之前,我们如何去操作 nginx ##简单粗暴法 pk ...
- PAT-进制转换-B1022 D进制的A+B (20分)
题目描述: 输入两个非负10进制整数A和B(≤230-1),输出A+B的D(1<D≤10)进制数. 输入格式: 输入在一行中依次给出3个整数A.B和D. 样例: 输入:123 456 8 输出: ...
- 【WPF学习】第五十三章 动画类型回顾
创建动画面临的第一个挑战是为动画选择正确的属性.期望的结果(例如,在窗口中移动元素)与需要使用的属性(在这种情况下是Canvas.Left和Canvas.Top属性)之间的关系并不总是很直观.下面是一 ...
- PyCharm使用技巧及常用快捷键
Ctrl + Shift + F--------------------------------------------->>>>>>>高级查找 Ctrl + ...
- 前端每日实战:123# 视频演示如何用纯 CSS 创作一架双冀飞机
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/yxVYRL 可交互视频 此视频是可 ...
- Ajax同步和异步的区别?
今天在code review时候看到同事的代码,用了ajax同步,async:false,如果不设置async参数,默认是true,为异步,异步的情况是比较复杂的,看下同步这个例子: function ...