axios封装怎么实现(axios的简单封装以及使用实例代码)
类别:编程学习 浏览量:805
时间:2021-10-20 08:31:49 axios封装怎么实现
axios的简单封装以及使用实例代码前言
最近在构建项目时,想到了请求的封装,之后就琢磨如何封装才好。虽然对各位大佬来说可能是个小事情,但对我来说也算是一个小小的挑战。在我设想中请求的一些基本配置与具体接口应该放于两个文件,因此我新建了两个文件 axios.js与api.js
axios.js
axios.js主要是针对axios的一些基本配置: baseURL 请求拦截器 响应拦截器 等等
import axios from 'axios'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import router from '../router';
首先在当前js中引入axios,引入element是为了在当前js内可以使用其组件,目的是为了在响应拦截器中对各种返回值进行直接提示。引入router的为了在响应拦截器中根据具体返回值来进行页面跳转,比如没有权限则跳转到登录页面
if (process.env.NODE_ENV === 'development') { axios.defaults.baseURL = 'api'; } else if (process.env.NODE_ENV === 'production') { axios.defaults.baseURL = 'https://xxxxxxxxxx/index/'; }
对于baseURL的处理,我区分了开发环境与生产环境
//请求拦截器 区分了一下正常请求时与发送formdata时的请求头 axios.interceptors.request.use((config) => { config.headers['Content-Type'] = 'application/json'; if (config.method === 'post') { //FormData时的请求头 if (Object.prototype.toString.call(config.data) === '[object FormData]') { // 请求拦截器处理 config.headers['Content-Type'] = 'multipart/form-data'; } else if (Object.prototype.toString.call(config.data) === '[object String]') { config.headers['Content-Type'] = 'application/x-www-form-urlencoded'; } } else { config.headers['Content-Type'] = 'application/json'; } return config; }); //响应拦截器 axios.interceptors.response.use( (config) => { let value = config.data; if (config.status && config.status === 200) { if (typeof value === 'string') { if (value === 'timeout') { ElementUI.MessageBox.confirm('太长时间没有操作或操作没有权限,请进入登录页面重新登录?', '提示', { confirmButtonText: '确定', type: 'warning' }).then(() => { router.push({ name: 'login' }); }); }else { ElementUI.Message.info(value); } } } return config; }, (err) => { let value = err.response.statusText; switch (err.response.status) { case 400: ElementUI.Message.error('语法格式有误,服务器无法理解此请求') break; case 401: case 403: case 404: case 405: ElementUI.Message.warning(value); break; default: ElementUI.Message.error('操作过程出错,此次操作无效!' + value); break; } return err.response } );
对于响应拦截器,我这边是根据自己后端返回的值来处理,因为没怎么弄过后端所以只是对返回简单处理了一下
下面是对get与post的一个封装
export async function axiosGet(url, params = {}) { let res = await axios.get(url, { params: params }); if(res.status === 200){ return res.data }else { throw res.statusText } } export async function axiosPost(url, params = {}) { let res = await axios.post(url, params); if(res.status === 200){ return res.data }else { throw res.statusText } }
使用async与await 直接取到返回值进行判断,如果返回成功则输出返回值 如果不成功则抛出错误
最后将封装的方法导出
api.js
整个api.js是项目内所有接口存放的地方
import { axiosGet,axiosPost } from './axios'
引入axios.js,获取到封装的axiosGet与axiosPost
export default { getLogin:(params = {}) => { return axiosPost('/login', params) }, getUser:(params = {}) => { return axiosGet('http://localhost:3000/user', params) } }
这里我使用简单的两个接口来做示例,在api.js中的处理就已经完成了
使用配置好的接口
到这里我们的axios已经封装完毕,接下来就是使用的演示了
import DbauditServer from '@/server/api' //在要调用接口的文件中引入api.js let formData = new FormData formData.append('password', this.formLabelAlign.password) let res1 = await DbauditServer.getLogin(formData) //直接调用就可以正常使用了 let res2 = await DbauditServer.getUser()
当然还可以细致一些,因为之前封装get与post的时候遇到错误返回值是直接抛出,因此,接口的调用也可以使用try catch来包裹,对error进行特定的处理即可。
总结
到此这篇关于axios的简单封装以及使用的文章就介绍到这了,更多相关axios简单封装内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vue接口请求类封装(Vue接口封装的完整步骤记录)
- php 结果集转json(PHP的JSON封装、转变及输出操作示例)
- laravel 框架关键技术解析(在laravel框架中实现封装公共方法全局调用)
- python类继承和封装(Python面向对象程序设计类的封装与继承用法示例)
- vue3 axios 怎么封装api(vue中如何简单封装axios浅析)
- react组件封装成函数方法(React虚拟列表的实现)
- vue3封装table组件(Vue封装通用table组件的完整步骤记录)
- angular封装公共组件(详解Angular组件之生命周期二)
- php创建多个文件(PHP实现单文件、多个单文件、多文件上传函数的封装示例)
- vuevlog制作软件(Vue实现Dialog封装)
- php开发api接口登录(PHP调用接口API封装的例子)
- vue组件滚动加载教程(Vue组件封装上传图片和视频的示例代码)
- python类中的数据封装(基于python生成器封装的协程类)
- php封装api(PHP常用的类封装小结4个工具类)
- vue封装组件技巧(浅谈vue中所有的封装方式总结)
- react 封装下拉选择框(React鼠标多选功能的配置方法)
- 你好,新成理人丨成都理工大学2019级新生开学典礼隆重举行(新成理人丨成都理工大学2019级新生开学典礼隆重举行)
- 这部民警编演的红色话剧,讲述了一个不断追寻的故事(这部民警编演的红色话剧)
- 日本菜有什么好吃(日本菜有什么好吃的做法)
- 韩国泡菜做法(韩国泡菜的做法步骤)
- 泰国旅游攻略(泰国旅游攻略必去景点)
- 越难春卷(越难春卷皮怎么用)
热门推荐
- dedecms添加代码(dedecms 栏目目录用首字母生成的方法)
- drools动态执行规则(使用swoole 定时器变更超时未支付订单状态的解决方案)
- sqlserver安装使用教程(SQL Server 2019下载与安装教程自定义安装)
- windowsserver2008部署php项目(win2008 r2 服务器环境配置FTP/ASP/ASP.Net/PHP)
- docker 容器经常启动失败(浅谈Docker run 容器处于created状态问题)
- linq not in 查询
- vsftpd服务器的安装与配置(编译安装 vsFTP 3.0.3的详细解析)
- easyui messager的用法
- mysql8.0关键字段使用(MySQL 8.0新特性之隐藏字段的深入讲解)
- deepin数据库编程(deepin20.1系统安装MySQL8.0.23超详细的MySQL8安装教程)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9