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没有进行封装复用,项目越来越大,引起的代码冗 ...
随机推荐
- Gradle的依赖方式——Lombok在Gradle中的正确配置姿势
写过java的都知道,lombok几乎在项目中处于不可或缺的一部分,但是lombok在Gradle的项目中配置并非人人都知道. 很多人在项目依赖中直接这样写 1 compile "org.p ...
- 安卓权威编程指南 挑战练习 25章 深度优化 PhotoGallery 应用
你可能已经注意到了,提交搜索时, RecyclerView 要等好一会才能刷新显示搜索结果.请接受挑战,让搜索过程更流畅一些.用户一提交搜索,就隐藏软键盘,收起 SearchView 视图(回到只显示 ...
- C++扬帆远航——9(小学生算数程序)
/* * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:studentjishu.cpp * 作者:常轩 * 微信公众号 ...
- C++ 走向远洋——44(项目一、点—圆—圆柱类族的设计、派生类)
*/ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...
- 探究Java中的引用
探究Java中的四种引用 从JDK1.2版本开始,Java把对象的引用分为四种级别,从而使程序能更加灵活的控制对象的生命周期.这四种级别由高到低依次为:强引用.软引用.弱引用和虚引用.本篇就来详细探究 ...
- APM监控工具Pinpoint搭建
一:Pinpoint简介与架构图示 Pinpoint是什么Pinpoint是开源在github上的一款使用JAVA语言编写的APM监控工具,用于大规模分布式系统监控.它对性能的影响较小,只增加约3%的 ...
- SQL Server 最小日志记录
SQL Server之所以记录事务日志,首要目的是为了把失败或取消的操作还原到最原始的状态,但是,并不是所有的操作都需要完全记录事务日志,比如,在一个空表上放置排他锁,把大量的数据插入到该空表中.即使 ...
- 前端开发--vue开发部分报错指南
前期开发过程中 [Vue warn]: Error in render: "TypeError: Cannot read property '0' of undefined". 解 ...
- 有了这套微信小程序x5调试,调试一些简单的开发者工具调试不了的功能不成问题!!!!
1.首先我们需要打开微信 TBS 调试 地址是:http://debugx5.qq.com 2.然后打开手机 打开开发者模式,打开 USB 调试 3.然后 在谷歌浏览器地址栏输入 chrome://i ...
- 使用SharpDevelop配合MonoGame进行游戏开发
SharpDevelop是一款开源的轻量级IDE,它支持众多的语言及项目开发.可以看看支持的项目. 程序本体仅十几MB,打开项目速度飞快. 目前SharpDevelop最高支持C# 5.0,.NET ...