import axios from 'axios'
// import store from '@/vuex/store.js'
import router from '../router'
import qs from 'qs' const instance = axios.create({}); instance.defaults.baseURL = 'http://mini.youhulianchuang.com';
instance.defaults.timeout = 5000;
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
instance.defaults.headers.post['X-Requested-With'] = 'XMLHttpRequest';
instance.defaults.headers.post['top-token'] = 'top-token';
instance.defaults.responseType = 'json'; // 请求拦截
instance.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
console.log('请求拦截')
console.log(config)
return config; }, function (error) {
// 对请求错误做些什么
// alert('网络错误,请稍后再试'); }); // 对传给后台的数据做统一的操作
instance.defaults.transformRequest=[function (data) {
// 对 data 进行任意转换处理 Object.assign(data,{age:21})
console.log(data)
return data; }] // `transformResponse` 在传递给 then/catch 前,允许修改响应数据
instance.defaults.transformResponse=[function (data) {
// 对 data 进行任意转换处理
console.log(data) return data;
}] // 添加响应拦截器
instance.interceptors.response.use(function (response) {
console.log('添加响应拦截器')
console.log(response)
return response.data; }, function (error) {
// 对响应错误做点什么 if(error.response) { }
// return Promise.reject(error);
}); export default {
install: function(vm){
    vm.prototype.$instance = instance;
}

2、调用

在main.js中引入封装文件并当作vue插件使用

import Utile from './lib/utils'

Vue.use(Utile)

3、在模块中使用get请求

this.$instance.get(`Employee/Detail/${this.$route.query.userId}`
                ).then((res)=>{    
                    console.log(res.data)
                    if(res.data.code == 0){
                       操作
                 }
                 else{

}

})

4、在模块中使用post请求

this.$instance.post("/enumList",
                  params).then(({ data: { data = []} = {} })=>{
                  console.log(data)
                })
                .catch((error) =>{
                  console.log(error);
                });
      })

注:params是参数

封装axios的更多相关文章

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

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

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

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

  3. 封装axios方法之一

    一.先来说说为什么要封装axios异步请求. 我们前端开发中总是会遇到跨域的问题,我们会配置proxy来解决跨域的问题,无论是vue 还是react. 如何配置我这里就不说了. 然后...然后我们就会 ...

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

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

  5. 15、vue项目封装axios并访问接口

    1.在src下新建util文件夹,在util下新建request.js文件: 封装axios: import axios from 'axios' import QS from 'qs'; // im ...

  6. Vue中封装axios

    参考: https://www.jianshu.com/p/7a9fbcbb1114 https://www.cnblogs.com/dreamcc/p/10752604.html 一.安装axios ...

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

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

  8. 创建Vue项目及封装axios

    1. 始vue化项目 https://www.cnblogs.com/xiaonq/p/11027880.html vue init webpack deaxios # 使用脚手架创建项目 deaxi ...

  9. 封装axios在util中

    创建util工具类,封装通用的get和post请求 封装axios成工具类,方便大家请求调用 1.创建util文件夹 2.创建request.js 3.封装 //封装请求相关方法 //初始化一个axi ...

随机推荐

  1. word20170103除了busy,忙的10种英语说法!

    年前,忙死啦!除了busy,这些说法更地道.更形象! #1 I'm swamped! Swamp: 沼泽“忙死了”最形象.最对应的英语说法:It's the end of the year. I'm ...

  2. MySQL5.7开启独立表空间参数innodb_file_per_table【原创】

    今天在线上某个系统发现MySQL数据库使用的是共享表空间,想修改为独立表空间,操作如下: #因为是主从结构,在从库修改测试,先关闭binlog SET SQL_LOG_BIN=; show varia ...

  3. 【easy】257. Binary Tree Paths 二叉树找到所有路径

    http://blog.csdn.net/crazy1235/article/details/51474128 花样做二叉树的题……居然还是不会么…… /** * Definition for a b ...

  4. 【转】Python——读取html的table内容

    Python——python读取html实战,作业7(python programming) 查看源码,观察html结构 # -*- coding: utf-8 -*- from lxml.html ...

  5. Django-ORM-单表操作

    ORM字段参数及单表操作 一.字段参数 1.字段 AutoField(Field) #当model中如果没有自增列,则会自动创建一个列名为id的列 -int 自增列,必须填入参数primary_key ...

  6. 清晰讲解SQL语句中的内连接,通用于Mysql和Oracle,全是干货哦

    本文章目的:力求清晰明了讲解SQL语句的内连接的各种应用,没有深奥的理解! 前奏:这篇文章和下篇文章会将内连接和外连接讲解清楚SQL语句的多表查询常用的有以下几种:两表联合查询(1)内连接(2)外连接 ...

  7. Python安装xlrd和xlwt的步骤以及使用报错的解决方法

    一.安装xlrd和xlwt功能模块步骤 1.使用python -V查看python的版本号,并查看python安装环境,是否安装成功:   2.可以通过官网(python官网:https://pypi ...

  8. OpenStack--ntp组件时间同步服务

    作用:ntp主要是用于对计算机的时间同步管理操作 环境: 服务端: 192.168.245.172 客户端: 192.168.245.171 时间是对服务器来说是很重要的,一般很多网站都需要读取服务器 ...

  9. Spring 将请求参数封装成对象

    简单描述:最近手里的模块,前后台之间需要传递很多的参数,使用封装的PageData,来获取请求参数的,作微服务迁移的时候,就涉及到需要把参数从pagedata里取出来,一个一个的放到对象的属性中.就很 ...

  10. mysql启动失败问题记录

    net start mysql 启动mysql服务,启动失败: 手动启动服务,又失败 命令查看日志:mysqld --console 在网上找了解决办法如下: 找到mysql目录,进去bin目录,找到 ...