axios的使用上一般封装好对应的方法,ES6导出,直接调用,消息通知使用了ElementUI的Message组件。

这是一个封装了axios的Rest风格的工具类,包扩常用的POST,GET,PUT,DELETE,

在请求处理上使用统一的请求拦截处理。对返回的消息进行拦截预处理,有数据返回数据,没有返回消息。

import axios from 'axios'
import router from '../router'
import { Message } from 'element-ui'; /*
//封装网络请求方法
*/
/**
* 统一处理网络请求的响应拦截处理方式,
*/
axios.interceptors.response.use(success => {
if (success.status && success.status == 200 && success.data.status == 500) {
Message.error({ message: success.data.msg })
return;
}
if (success.data.msg) {
Message.success({ message: success.data.msg })
}
return success.data;
}, error => {
if (error.response.status == 504 || error.response.status == 404) {
Message.error({ message: '服务器被吃了( ╯□╰ )' })
} else if (error.response.status == 403) {
Message.error({ message: '权限不足,请联系管理员' })
} else if (error.response.status == 401) {
Message.error({ message: '尚未登录,请登录' })
router.replace('/');
} else {
if (error.response.data.msg) {
Message.error({ message: error.response.data.msg })
} else {
Message.error({ message: '未知错误!' })
}
}
return;
})
//post请求的封装K-v形式
let base = '';
export const postKeyValueRequest = (url, params) => {
return axios({
method: 'post',
url: `${base}${url}`,
data: params,
transformRequest: [function(data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
} return ret
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
}
});
}
//传递json的post请求
export const postRequest = (url, params) => {
return axios({
method: 'POST',
url: `${base}${url}`,
data: params,
})
}
// put请求封装
export const putRequest = (url, params) => {
return axios({
method: 'put',
url: `${base}${url}`,
data: params,
})
}
// get请求封装
export const getRequest = (url, params) => {
return axios({
method: 'get',
url: `${base}${url}`,
data: params,
})
}
// delete请求封装
export const deleteRequest = (url, params) => {
return axios({
method: 'delete',
url: `${base}${url}`,
data: params,
})
}

axios请求方法封装.的更多相关文章

  1. axios浏览器异步请求方法封装 XMLHttpRequest

    axios学习笔记defaults(浏览器端异步请求处理方式) 浏览器异步请求方法封装,主要使用XMLHttpRequest lib/adapters/xhr.js //入口 var utils = ...

  2. 基于promise对小程序http请求方法封装

    原因是我不想每次请求都复制粘贴那么长的请求地址,所以我把前边那一坨请求地址作为基础地址,只传后台给的路由就ok,而且,并不是每次请求都要显示正在加载,这对小程序体验很差,所以,我加了个形参,用来判断是 ...

  3. 通用ajax请求方法封装,兼容主流浏览器

    ajax简单介绍 没有AJAX会怎么样?普通的ASP.Net每次运行服务端方法的时候都要刷新当前页面. 假设没有AJAX,在youku看视频的过程中假设点击了"顶.踩".评论.评论 ...

  4. vue-ajax/axios请求函数封装: axios+promise

    项目文件目录/src/api ajax.js /** * ajax 请求函数模块 * 返回值为promise对象 */ import axios from 'axios' export default ...

  5. axios请求的封装

    /* axios的请求封装 */         //axios的原生写法get,post请求         //第一个参数为请求地址,第二个参数为请求的参数,params是将参数拼接在url的后面 ...

  6. vue+axios请求头封装

    import { mapMutations } from 'vuex' import axios from 'axios' import { Toast } from 'mint-ui'; impor ...

  7. Curl请求方法封装

    /** * GET请求 * @param $url * @return bool|mixed */ function http_get($url) { $oCurl = curl_init (); i ...

  8. PHP——封装Curl请求方法支持POST | DELETE | GET | PUT 等

    前言 Curl:  https://www.php.net/manual/en/book.curl.php curl_setopt: https://www.php.net/manual/en/fun ...

  9. 前端axios请求二进制数据流转换生成PDF文件空白问题(终极解决方案)

    本文章共1570字,预计阅读时间1 - 3分钟. 问题场景: axios请求二进制数据转换生成PDF空白问题,使用axios请求后端接口,后端返回的二进制流文件,需要转换成PDF,但是在postman ...

随机推荐

  1. Java数据库操作学习

    JDBC是java和数据库的连接,是一种规范,提供java程序与数据库的连接接口,使用户不用在意具体的数据库.JDBC类型:类型1-JDBC-ODBC桥类型2-本地API驱动类型3-网络协议驱动类型4 ...

  2. 循环语句作业与循环补充(continue与break)

    作业: 1.使用while循环输入1 2 3 4 5 6 8 9 10(没有7) n = 1 while n < 11: if n == 7: pass else: print(n) n = n ...

  3. vmware安装ubuntu的简单配置

    介绍:ubuntu是一个桌面体验比较好的linux操作系统,尝试使用vmware安装一个虚拟机试用一下,做个简单记录,安装操作系统步骤省略 一.配置root用户,并使用root登录图像界面 Ubunt ...

  4. $loj530\ [LibreOJ\ \beta\ Round \#5]$ 最小倍数 数论

    正解:数论 解题报告: 传送门$QwQ$! 不想做题,来水点儿简单点的$QwQ$. 一个显然的点在于可以直接对不同质因子分别算$n_{min}$最后取$max$. 这个正确性还是蛮显然的?因为只要有$ ...

  5. 大白话抽象工厂模式(Abstract Factory Pattern)

    实例分析 大白话工厂方法模式(Factory Method)一文中,我们讲解了日产4S店工厂规模的扩大,创建了针对不同车型的工厂,减少了工厂的工作内容,提高了效率.下面我们继续以4S店的故事讨论抽象工 ...

  6. 一文MyBatis-Plus快速入门

    目录 一.依赖及配置 1.在idea中创建一个SpringBoot项目,在pom.xml中添需要的依赖 2.配置数据库连接 3.在启动类中添加注解 @MapperScan 扫描Mapper接口包 4. ...

  7. 小小知识点(三十七)OFDM和OFDMA的区别以及OFDMA与SC-FDMA的区别

    OFDM和OFDMA的区别 OFDM(orthogonal frequency division multiplexing),which assigns one block (in time ) to ...

  8. linux各目录及重要目录的详细介绍

    1 目录说明 根目录 (/) /bin bin是Binary的缩写, 这个目录存放着最经常使用的命令,比如ls,cat,mkdir等 /dev dev是Device(设备)的缩写, 该目录下存放的是L ...

  9. WPF 给Button按钮加小图标图片Image

    前言:当WPF项目后台完成到一定程度的时候,就可以对XAML前端进行美化啦,个人认为XAML前端还是挺有意思的. 下面举一个Button加过小图标后的例子: 是不是比生硬的文字看来更人性化了呢? 不多 ...

  10. 【转】[IT综合面试]牛人整理分享的面试知识:操作系统、计算机网络、设计模式、Linux编程,数据结构总结

    感谢IT面试群 S-北京-陈磊 的整理分享.   基础篇:操作系统.计算机网络.设计模式         提高篇:WIN32.MFC与Linux 算法篇:算法与数据结构           一:操作系 ...