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. springboot2.1.3集成单节点elasticsearch6.4.0

    本案例写了一个关于医生医院搜索的例子,包括求和模式下的打分(分值与相关性有关)搜索,单节点时切勿配置节点名称和节点ip.github地址:https://github.com/zhzhair/spri ...

  2. Java继承详解

    目录 前言 继承的格式: 继承的特点: 继承的优缺点 继承的注意点(重要) 继承的使用 前言 类是对对象的抽象,具有共同属性和行为的许多对象抽象出一个类. 例如:有三个学生小明,小红,小李都有姓名,年 ...

  3. zabbix监控ssl证书到期时间

    监控脚本 cat ssl_check.sh #!/bin/bash # #获取ssl证书的过期时间 #menghao #获取证书的有效时间 time=$(echo | openssl s_client ...

  4. DataTable插件通过js导出Excel

    $('#myTab').DataTable( { serverSide: false,//分页,取数据等等的都放到服务端去. true为后台分页,每次点击分页时会请求后台数据,false为前台分页 d ...

  5. CentOS Linux Jenkins安装、部署、更新

    1.安装:https://wiki.jenkins.io/display/JENKINS/Installing+Jenkins+on+Red+Hat+distributions2.部署: 注意事项: ...

  6. 关于javascript闭包(Closure)和return之间的暧昧关系

    什么是闭包?阮一峰老师说的很清楚了,定义在一个函数内部的函数,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁. 首先要了解Javascript的变量作用域:全局变量和局部变量.全局嘛,就是共 ...

  7. vim的简单使用以及一些常用的命令

    对于第一次用vi,有几点注意要提醒一下:1.用vi打开文件后,是处于「命令行模式(command mode)」,您要切换到「插入模式(Insert mode)」才能够输入文字.切换方法:在「命令行模式 ...

  8. Macro For Creating a dwStyle for a window without a menu bar and title bar

    Introduce For CreateWindowEx Creates an overlapped, pop-up, or child window with an extended window ...

  9. EF Core 2.2 对多个 DbContext 多个数据库的情况进行迁移的示例

    目录 场景 创建新项目 创建第一个模型 创建第二个模型 使用依赖注入注册上下文 创建数据库 场景 在一个项目中,使用了多个 DbContext 且每个 DbContext 对应一个数据库的情况 创建新 ...

  10. HeadFirst学习笔记-1. 设计模式入门

    1.概念 在开始学习前,我们先了解一些概念,方便我们接下来的学习. OO基础 抽象 继承 多态 封装 OO原则 封装变化 多用组合,少用继承 针对接口编程,不针对实现编程 设计模式 设计模式(Desi ...