一、安装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的更多相关文章

  1. Vue 封装axios(四种请求)及相关介绍(十三)

    Vue 封装axios(四种请求)及相关介绍 首先axios是基于promise的http库 promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的 ...

  2. vue 封装axios以及使用中间代理 proxy

    为什么需要封装呢?主要是为了更好管理项目以及增加复用性 1.首先在src文件夹下创建api文件夹 . utils文件夹 . server文件夹 api:创建一个index.js文件   用来存放接口地 ...

  3. vue 封装 axios 和 各类的请求,以及引入 .vue 文件中使用

    //src 底下建立 api 文件夹 // api 文件夹下建立 request,js 文件,文件内容复制下面这段代码即可   /**  * ajax请求配置  */ import axios fro ...

  4. vue封装axios方法推荐)

    目录结构: api.js export default { myTopic: '/api/subscribe-data/post/cat' } request.js import axios from ...

  5. Vue 给axios做个靠谱的封装(报错,鉴权,跳转,拦截,提示)

    需求及实现 统一捕获接口报错 弹窗提示 报错重定向 基础鉴权 表单序列化 用法及封装 用法 // 服务层 , import默认会找该目录下index.js的文件,这个可能有小伙伴不知道可以去了解npm ...

  6. vue中axios 配置请求拦截功能 及请求方式如何封装

    main.js 中: import axios from '................/axios' axios.js 中: //axios.js import Vue from 'vue' i ...

  7. vue中Axios的封装和API接口的管理

    前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习.如果对原博主造成侵犯,我会立即删除. 转载地址:点击查看 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题 ...

  8. 【转】Vue 2.0封装axios笔记

    前言 单页面应用大多采用前后端分离开发思路,我们知道,前端和后端交互有多中方式(服务器端渲染.Ajax.websocket等),今天我们主要讲解Ajax部分. 最近团队讨论了一下,Ajax 本身跟 V ...

  9. Vue笔记:封装 axios 为插件使用

    前言 自从Vue2.0推荐大家使用 axios 开始,axios 被越来越多的人所了解.使用axios发起一个请求对大家来说是比较简单的事情,但是axios没有进行封装复用,项目越来越大,引起的代码冗 ...

随机推荐

  1. C2C的道德边界:沦为从假运单到假病条的供假渠道

    你可能刚开始学会不去看网购平台上商品回评中的虚假好评,却又要开始应对同事在朋友圈等平台买来的虚开病假条带来的困扰.最近各大媒体包括党报热传的网购病假条事件,再度将人们的目光集中在这个C2C模式之上.从 ...

  2. iNeuOS工业互联平台,.NETCore开发的视频服务组件iNeuVideo,RTSP转WebSocket

    目       录 1.      概述... 2 2.      将来集成到iNeuOS平台演示... 3 3.      iNeuVideo结构... 3 4.      iNeuVideo部署及 ...

  3. Hibernate入门之注解@Column详解

    前言 上一节我们讲解了Hibernate的主键生成策略,本节我们继续来讲讲Hibernate中针对列的映射即@Column注解,文中若有错误之处,还望指正. @Column注解详解 我们看到如上针对列 ...

  4. 全差分运算放大器ADA4930的分析(1)

    AD转换芯片的模拟信号输入端方式为:全差分.伪差分.单端输入,其中全差分输入的效果最佳,现阶段ADC转换器为了提高其性能,建议用户使用全差分的输入方式.(AD7982.ADS8317等都能实现信号的全 ...

  5. 编写简单i18n库

    i18n是什么?i18n(其来源是英文单词internationalization的首末字符i和n,18为中间的字符数)是"国际化"的简称. 前言 第一次接触多语言是用野生java ...

  6. 编程老司机带你玩转 CompletableFuture 异步编程

    本文从实例出发,介绍 CompletableFuture 基本用法.不过讲的再多,不如亲自上手练习一下.所以建议各位小伙伴看完,上机练习一把,快速掌握 CompletableFuture. 个人博文地 ...

  7. 细说集群技术(Cluster)

    今天本人给大家讲解一些我对集群技术一个理解,如有不对的或者讲的不好的可以多多提出,我会进行相应的更改,先提前感谢提出意见的各位了!!! 集群(Cluster)技术:通过此可以用较低的成本获取较高的性能 ...

  8. ES6的编程风格

    1,建议使用let替代var 2,全局常量使用const,多使用const有利于提高程序的运行效率. const有两个好处:一是阅读代码的人立刻会意识到不应该修改这个值,二是防止无意间修改变量值导致错 ...

  9. new Date在IOS下面的兼容问题

    此问题坑爹啊,着实坑爹,要不是本宝宝鬼机灵再次进行了测试,不然测试都测不出来的问题,问题源头,有两个时间: let start =  "2018-08-08 00:00:00" ; ...

  10. 一次生产环境搭建11g RAC的记录

    一.使用惠普3par工具配置共享存储 该部分可由惠普工作人员协助配置,只需将需求告知即可.如果想自己配置,惠普厂商会发送相关的软件工具以及操作手册给用户. 用putty登陆共享存储,使用showpd ...