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使用v-model封装el-pagination组件的全过程)
- php创建多个文件(PHP实现单文件、多个单文件、多文件上传函数的封装示例)
- vue3 axios 怎么封装api(vue中如何简单封装axios浅析)
- vuevlog制作软件(Vue实现Dialog封装)
- vue引入axios(vue封装axios的几种方法)
- docker怎么使用supervisor(supervisor下的Dockerfile的多服务镜像封装操作)
- css下填充代码(CSS学习笔记之常用Mixin封装实例代码)
- vue封装组件技巧(浅谈vue中所有的封装方式总结)
- vue3封装table组件(Vue封装通用table组件的完整步骤记录)
- phpcurl缺点(PHP封装cURL工具类与应用示例)
- php封装api(PHP常用的类封装小结4个工具类)
- 前端面试题之promise的手动封装(Promise面试题详解之控制并发)
- php 上传图片如何压缩(PHP实现将上传图片自动缩放到指定分辨率,并保持清晰度封装类示例)
- vue怎么接收后台的数据(Vue封装全局toast组件的完整实例)
- vue怎么引入axios(如何用vue封装axios请求)
- react 封装下拉选择框(React鼠标多选功能的配置方法)
- 今天要穿什么颜色(今天要穿什么颜色的衣服最吉利)
- 一道高中题-求杯子的高度(一道高中题-求杯子的高度)
- 网坛停摆三巨头亏损惨重,费德勒跌幅88 纳达少赚2400万(网坛停摆三巨头亏损惨重)
- Beyond 版本《无人深空》主线任务攻略 阿特拉斯之道(版本无人深空主线任务攻略)
- 全球科技界最有钱大佬TOP 15 你知道几位(全球科技界最有钱大佬TOP)
- 2主力后腰缺阵 泰山队奇兵有望获重用,赛季0出场,迎来中超首秀(泰山队奇兵有望获重用)
热门推荐
- tensorflow卷积网络(TensorFlow卷积神经网络之使用训练好的模型识别猫狗图片)
- 阿里云服务器怎样设置ip(阿里云服务器ping不通解决办法云服务器搭建完环境访问不了ip解决办法)
- ssl服务器搭建的步骤(windows apache环境下部署SSL证书让网站支持https的配置方法)
- sql优化100个技巧(52条SQL语句教你性能优化)
- python3 for循环怎么用(Python3.5基础之变量、数据结构、条件和循环语句、break与continue语句实例详解)
- 别让用户发呆,提升网站用户体验
- phpstudy如何域名访问(phpStudy2016 配置多个域名期间遇到的问题小结)
- java温度转换自动识别(Apache Calcite 实现方言转换的代码)
- jquery中serialize方法对空格的处理
- mysql substr函数的用法(MySQL切分函数substring的具体使用)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9