热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

开发笔记:axios请求方法封装.

篇首语:本文由编程笔记#小编为大家整理,主要介绍了axios请求方法封装.相关的知识,希望对你有一定的参考价值。ax

篇首语:本文由编程笔记#小编为大家整理,主要介绍了axios请求方法封装.相关的知识,希望对你有一定的参考价值。


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,
})
}

 


推荐阅读
  • 在 Vue 应用开发中,页面状态管理和跨页面数据传递是常见需求。本文将详细介绍 Vue Router 提供的两种有效方式,帮助开发者高效地实现页面间的数据交互与状态同步,同时分享一些最佳实践和注意事项。 ... [详细]
  • 本文详细介绍了在 Vue.js 前端框架中集成 vue-i18n 插件以实现多语言支持的方法。通过具体的配置步骤和示例代码,帮助开发者快速掌握如何在项目中实现国际化功能,提升用户体验。同时,文章还探讨了常见的多语言切换问题及解决方案,为开发人员提供了实用的参考。 ... [详细]
  • 深入浅出 webpack 系列(二):实现 PostCSS 代码的编译与优化
    在前一篇文章中,我们探讨了如何通过基础配置使 Webpack 完成 ES6 代码的编译。本文将深入讲解如何利用 Webpack 实现 PostCSS 代码的编译与优化,包括配置相关插件和加载器,以提升开发效率和代码质量。我们将详细介绍每个步骤,并提供实用示例,帮助读者更好地理解和应用这些技术。 ... [详细]
  • 优化后的标题:深入探讨网关安全:将微服务升级为OAuth2资源服务器的最佳实践
    本文深入探讨了如何将微服务升级为OAuth2资源服务器,以订单服务为例,详细介绍了在POM文件中添加 `spring-cloud-starter-oauth2` 依赖,并配置Spring Security以实现对微服务的保护。通过这一过程,不仅增强了系统的安全性,还提高了资源访问的可控性和灵活性。文章还讨论了最佳实践,包括如何配置OAuth2客户端和资源服务器,以及如何处理常见的安全问题和错误。 ... [详细]
  • 深入解析:React与Webpack配置进阶指南(第二部分)
    在本篇进阶指南的第二部分中,我们将继续探讨 React 与 Webpack 的高级配置技巧。通过实际案例,我们将展示如何使用 React 和 Webpack 构建一个简单的 Todo 应用程序,具体包括 `TodoApp.js` 文件中的代码实现,如导入 React 和自定义组件 `TodoList`。此外,我们还将深入讲解 Webpack 配置文件的优化方法,以提升开发效率和应用性能。 ... [详细]
  • 在深入研究 React 项目的过程中,特别是在探索 react-router 源码时,我发现了其中蕴含的中间件概念。这激发了我对中间件的进一步思考与整理。本文将详细探讨 Redux 中间件的原理及其在实际项目中的应用,帮助读者更好地理解和使用这一强大工具。通过具体示例和代码解析,我们将揭示中间件如何提升应用的状态管理和异步操作处理能力。 ... [详细]
  • 用阿里云的免费 SSL 证书让网站从 HTTP 换成 HTTPS
    HTTP协议是不加密传输数据的,也就是用户跟你的网站之间传递数据有可能在途中被截获,破解传递的真实内容,所以使用不加密的HTTP的网站是不 ... [详细]
  • Spring Boot 中配置全局文件上传路径并实现文件上传功能
    本文介绍如何在 Spring Boot 项目中配置全局文件上传路径,并通过读取配置项实现文件上传功能。通过这种方式,可以更好地管理和维护文件路径。 ... [详细]
  • 单片微机原理P3:80C51外部拓展系统
      外部拓展其实是个相对来说很好玩的章节,可以真正开始用单片机写程序了,比较重要的是外部存储器拓展,81C55拓展,矩阵键盘,动态显示,DAC和ADC。0.IO接口电路概念与存 ... [详细]
  • 本文详细介绍了 PHP 中对象的生命周期、内存管理和魔术方法的使用,包括对象的自动销毁、析构函数的作用以及各种魔术方法的具体应用场景。 ... [详细]
  • 本文介绍了如何利用 `matplotlib` 库中的 `FuncAnimation` 类将 Python 中的动态图像保存为视频文件。通过详细解释 `FuncAnimation` 类的参数和方法,文章提供了多种实用技巧,帮助用户高效地生成高质量的动态图像视频。此外,还探讨了不同视频编码器的选择及其对输出文件质量的影响,为读者提供了全面的技术指导。 ... [详细]
  • 在本文中,我们将探讨如何在Docker环境中高效地管理和利用数据库。首先,需要安装Docker Desktop以确保本地环境准备就绪。接下来,可以从Docker Hub中选择合适的数据库镜像,并通过简单的命令将其拉取到本地。此外,我们还将介绍如何配置和优化这些数据库容器,以实现最佳性能和安全性。 ... [详细]
  • 利用PHP循环高效处理多条帖子表单数据 ... [详细]
  • 如何使用ES6语法编写Webpack配置文件? ... [详细]
  • 使用 Vuex 管理表单状态:当输入框失去焦点时自动恢复初始值 ... [详细]
author-avatar
兔斯基小兔子_988
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有