/**
* 封装get方法
* @param url
* @param data
* @returns {Promise}
*/ export function get(url, params) {
return new Promise((resolve, reject) => {
axios.get(url, {
params: params
})
.then(response => {
resolve(response.data);
})
.catch(err => {
reject(err)
})
})
} /**
* 封装post请求
* @param url
* @param params
* @returns {Promise}
*/ // Form Data
// headers: {
// "Content-Type": 'application/x-www-form-urlencoded; charset=UTF-8'
// } // Form Data Request payload
//当headers为 json时是 request 方式发送请求 但是如果你们的后台是formData的方式接口 就传一个header进来 就可以 formData 需要qs序列化
//因为我们后台是json接受的比较多 所以json在我这里是默认 可以根据自己的情况修改 这个需要json转字符串不然是乱码的
export function post(url, params = {}, headers) {
return new Promise((resolve, reject) => {
if (headers == undefined) {
axios.post(url, JSON.stringify(params), {
headers: {
"Content-Type": "application/json;charset=UTF-8"
}
})
.then(res => {
resolve(res.data);
})
.catch(err => {
reject(err.data)
})
} else {
axios.post(url, QS.stringify(params), headers)
.then(res => {
resolve(res.data);
})
.catch(err => {
reject(err.data)
})
} });
}
/**
* 封装patch请求
* @param url
* @param data
* @returns {Promise}
*/ export function patch(url, data = {}) {
return new Promise((resolve, reject) => {
axios.patch(url, data)
.then(response => {
resolve(response.data);
}, err => {
reject(err)
})
})
} /**
* 封装put请求
* @param url
* @param data
* @returns {Promise}
*/ export function put(url, data = {}) {
return new Promise((resolve, reject) => {
axios.put(url, data)
.then(response => {
resolve(response.data);
}, err => {
reject(err)
})
})
}

 
main.js中 
import {
post,
get,
patch,
put,
} from './assets/utils/http' //定义全局变量
Vue.prototype.$post = post;
Vue.prototype.$get = get;
Vue.prototype.$patch = patch;
Vue.prototype.$put = put;

使用

this.$get("/role/getAllRole",{}).then(res => {});
this.$post("/judge/editJudgeInfoRole", {
oid: this.rowData.oid,
roleid: this.roleid
}).then(res => {});

拦截

全部代码

import axios from 'axios'
import QS from "qs"
import store from "@/store/index"
import router from '@/router/index'
import { mapState, mapMutations } from "vuex";
import {
Message
} from 'element-ui';
axios.defaults.timeout = ;
axios.defaults.baseURL = process.env.API_ROOT; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
axios.defaults.headers.common['Authorization'] = store.state.token ? store.state.token : localStorage.token; axios.interceptors.request.use(
config => {
config.headers = {
'Authorization': store.state.token ? store.state.token : localStorage.token
}
return config;
},
error => {
return Promise.reject(err);
}
); //http response 拦截器
axios.interceptors.response.use(
response => { },
error => {
return Promise.reject(error)
}
)

axios 请求二次封装的更多相关文章

  1. vue中axios的二次封装

    我们做项目时,虽然axios也可以直接拿来用,但是对接口比较零散,不太好进行维护,也会产生大量的重复代码,所以我在这对axios进行了统一接口处理 第一步,先在src中的公共文件夹中如utils里新建 ...

  2. vue项目中对axios的二次封装

    近来在使用vue重构公司m站时,使用了axios来进行数据的请求,由于项目的需要,对axios进行了二次封装,点击进入axios //引入axios import axios from 'axios' ...

  3. axios的二次封装

    'use strict' import axios from 'axios' import qs from 'qs' var host = "https://www.easy-mock.co ...

  4. axios 简单二次封装

    import axios from 'axios' import { Message } from 'element-ui'; // 设置baseURL //axios.defaults.baseUR ...

  5. Vue:对axios进行简单的二次封装

    主要做3点: 1.配置一个请求地址前缀 2.请求拦截(在请求发出去之前拦截),给所有的请求都带上 token 3.拦截响应,遇到 token 不合法则报错 // 对 axios 的二次封装 impor ...

  6. 前端Vue项目——首页/课程页面开发及Axios请求

    一.首页轮播图 1.elementUI走马灯 elementUI中 Carousel 走马灯,可以在有限空间内,循环播放同一类型的图片.文字等内容. 这里使用指示器样式,可以将指示器的显示位置设置在容 ...

  7. 原生 Ajax 封装 和 Axios 二次 封装

    AJAX 异步的JavaScript与XML技术( Asynchronous JavaScript and XML ) Ajax 不需要任何浏览器插件,能在不更新整个页面的前提下维护数据,但需要用户允 ...

  8. Vue: axios 请求封装及设置默认域名前缀 (for Vue 2.0)

    1. 实现效果 以get方法向http://192.168.32.12:8080/users 发起请求.获取数据并进行处理 this.apiGet('/users', {}) .then((res) ...

  9. axios 二次封装

    一般项目往往要对 axios 库进行二次封装,添加一些自定义配置和拦截器等 案例 ./service/axios.js 1234567891011121314151617181920212223242 ...

随机推荐

  1. Vue 的准备

    ## .es6的基本语法 ​ let---是局部作用于,不会存在变量提升,变量不能重复声明 ​ const--局部作用域,不会存在变量提升 不能重复声明,只声明常亮,不可变的量 ​ ```javasc ...

  2. PHP Windows下使用Memcached扩展

    github上发现了一个很好用的小文件,能够 模拟出php_memcached.dll的PHP memcached扩展. PHP memcached client 已知PCEL有两个memcache ...

  3. linux下shell脚本启动jar包

    本文采用的jar包是通过idea下maven打包的springboot项目. 写这个shell脚本是为了在linux下方便启动jar包时不用输入太多的shell命令,将启动脚本的一系列shell命令整 ...

  4. vue事件双向绑定

    事件 案例: vue的事件绑定原理:改变图片的背景颜色问题来实现这个框架的使用方法, new Vue({ el:"", data:{}, methord:{}, computed: ...

  5. vim配置(vimplus)教程及问题

    An automatic configuration program for vim 安装(github地址:https://github.com/chxuan/vimplus.git, 欢迎star ...

  6. 谁说搞Java的不能玩机器学习?

    简介 机器学习在全球范围内越来越受欢迎和使用. 它已经彻底改变了某些应用程序的构建方式,并且可能会继续成为我们日常生活中一个巨大的(并且正在增加的)部分. 没有什么包装且机器学习并不简单. 它对许多人 ...

  7. (Java) byte[] 和 base64 字符串之间的转换

    import org.apache.commons.codec.binary.Base64; public class UtilHelper { //base64字符串转byte[] public s ...

  8. Java后端开发工作 - 写接口

    我在公司的工作内容是,对于一个BS应用,负责服务器端开发工作,Java语言.与前端开发人员合作,最终提供给前端RESTFUL接口,保证页面正常响应. 经验之谈 一个接口可以理解为一个业务逻辑,一个业务 ...

  9. 使用Selenium爬取淘宝商品

    import pymongo from selenium import webdriver from selenium.common.exceptions import TimeoutExceptio ...

  10. 前端技术之:webpack热模块替换(HMR)

    第一步:安装HMR中间件: npm install --save-dev webpack-hot-middleware   第二步:webpack配置中引入webpack对象     const we ...