我是如何封装axios的
栏目: JavaScript · 发布时间: 5年前
内容简介:在vue中最常用的应该就是axios了,这是一个很强大的处理ajax的库。今天我就分享一下我是如何封装axios的。axios的基本api不再赘述,提前安装一下也不用我说了吧具体的拦截器逻辑以具体业务为准,我这里没什么逻辑,只是加了一个全局的loading而已这里我再创建一个
在vue中最常用的应该就是axios了,这是一个很强大的处理ajax的库。今天我就分享一下我是如何封装axios的。axios的基本api不再赘述,提前安装一下也不用我说了吧
第一步:配置axios
-
首先,创建一个
Service.js
,这里面存放的时axios的配置以及拦截器等,最后导出一个axios对象。我平常elementUI用的比较多,这里你也可以使用自己的UI库。
import axios from 'axios' import { Message, Loading } from 'element-ui' const ConfigBaseURL = 'https://localhost:3000/' //默认路径,这里也可以使用env来判断环境 let loadingInstance = null //这里是loading //使用create方法创建axios实例 export const Service = axios.create({ timeout: 7000, // 请求超时时间 baseURL: ConfigBaseURL, method: 'post', headers: { 'Content-Type': 'application/json;charset=UTF-8' } }) // 添加请求拦截器 Service.interceptors.request.use(config => { loadingInstance = Loading.service({ lock: true, text: 'loading...' }) return config }) // 添加响应拦截器 Service.interceptors.response.use(response => { loadingInstance.close() // console.log(response) return response.data }, error => { console.log('TCL: error', error) const msg = error.Message !== undefined ? error.Message : '' Message({ message: '网络错误' + msg, type: 'error', duration: 3 * 1000 }) loadingInstance.close() return Promise.reject(error) }) 复制代码
具体的拦截器逻辑以具体业务为准,我这里没什么逻辑,只是加了一个全局的loading而已
第二步:封装请求
这里我再创建一个 request.js
,这里面放的是具体请求。
export function getConfigsByProductId(productId) { return Service({ url: '/manager/getConfigsByProductId', params: { productId: productId } }) } export function getAllAndroidPlugins() { return Service({ url: '/manager/getAndroidPlugin ', method: 'get' }) } export function addNewAndroidPlugin(data) { return Service({ url: '/manager/addAndroidPlguin', data: JSON.stringify(data) }) } 复制代码
当然你也可以url再封装一遍,放到另一个文件里,我觉得这样并无什么意义,反而增加复杂度。这里主要注意的是起名问题,建议按功能起名,例如我这里 请求方式+功能或者内容+参数
,这样子直接看 getConfigsByProductId
这个名字也是很清晰明了
第三步:使用
在vue组件中
import {getAllAndroidPlugins,getConfigsByProductId,addNewAndroidPlugin} from '@/api/request.js' getAllAndroidPlugins() .then(res=>{ }) 复制代码
全局使用 在main.js中
import {Service} from '@/api/Service.js' Vue.prototype.$axios=Service 复制代码
欢迎指正与交流
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 封装JDBC—非框架开发必备的封装类
- SpringBlade 2.3.2 发布,增加 OSS 封装及单元测试封装
- SpringBlade 2.3.2 发布,增加 OSS 封装及单元测试封装
- docker 封装 alinode
- 封装Apk签名工具
- axios封装笔记
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
UML和模式应用
拉曼 / 李洋、郑䶮 / 机械工业出版社 / 2006-5 / 66.00元
《UML和模式应用(原书第3版)》英文版面世以来,广受业界专家和读者的好评,历经3个版本的锤炼,吸收了大量OOA,D的精华思想和现代实践方法。全书叙述清晰、用词精炼、构思巧妙,将面向对象分析设计的概念、过程、方法、原则和个人的实践建议娓娓道来,以实例为证,将软件的分析和设计的过程叙述得如逻辑推理一般,于细节处见真知。 《UML和模式应用(原书第3版)》是一本经典的面向对象分析设计技术的入门书......一起来看看 《UML和模式应用》 这本书的介绍吧!