axios的二次封装(详解)
一.首先让我们了解一下为什么要对axios进行二次封装?
1,代码封装,重用性高,减少代码量,减低维护难度。
2,统一处理一些常规的问题一劳永逸,如http错误。
3,拦截请求和响应,提前对数据进行处理,如获取token,修改配置项。
安装axios
npm下载
npm install axios
下载完成之后在main.js中全局引入
import axios from 'axios'
Vue.prototype.$axios = axios
在src下创建出一个新的文件夹 http
在http文件夹下创建一个新的api.js文件
//对axios进行二次封装,将刚才下载好的axios导入进来
import axios from "axios";//2. 利用axios对象的方法create,去创建一个axios实例
//requests就是axios,只不过稍微配置一下const api = axios.create({//基础路径baseURL: '', // 所有请求的公共地址部分timeout: 3000 // 请求超时时间,这里的意思是当请求时间超过5秒还未取得结果时,提示用户请求超时
})// 请求拦截处理 请求拦截 在请求拦截中可以补充请求相关的配置
// interceptors axios的拦截器对象
api.interceptors.request.use(config => {// config 请求的所有信息// console.log(config);// 响应成功的返回return config // 将配置完成的config对象返回出去 如果不返回 请求讲不会进行
}, err => {// 请求发生错误时的相关处理 抛出错误// //响应失败的返回Promise.reject(err)
})//响应拦截处理 响应拦截器:包含两个函数(一个是成功返回的函数,一个是失败的返回的函数)
api.interceptors.response.use(res => {// 我们一般在这里处理,请求成功后的错误状态码 例如状态码是500,404,403// res 是所有相应的信息console.log(res)return res.data
}, err => {// 服务器响应发生错误时的处理Promise.reject(err)
})//最后一步 暴露出去实例导出
export default api
在http文件夹在创建一个 axios.js文件 用来封装请求接口
// // 引入 封装的api
import api from './api.js';//下面是简写的形式
// getXXX 自定义的接口名字
export const getXXX = () => api.get('/getXXX ');// export const getXXX = (params) => api.get(`/apigb/v1/component`, { params})
// export const postXXX = (params) => api.post(`/apigb/v1/component/update-info`, params)// // 下面是详细的写法
// export const xxxx = (params) => api({
// url: '', // 请求地址
// method: 'post', // 请求方式
// // data: params, // (一般post请求,我们习惯使用 data属性来传参)
// params: params //(一般get请求,我们习惯使用params属性来传参)
// // 注意:data,和 params 两个属性传参使用,并不是固定的,也可以调换使用。
// })
最后就可以在组件中引入使用了
//在使用的组建中载入
// banner 自定义接口的名字
import { banner } from "../http/axios.js";
axios的二次封装(详解)相关推荐
- 集合 (二) ----- Map集合详解
相关文章: <集合 (一) ----- 集合的基本概念与Collection集合详解> <集合 (二) ----- Map集合详解> 文章目录 Map集合详解 一.Map集合基 ...
- 二叉堆详解实现优先级队列
二叉堆详解实现优先级队列 文章目录 二叉堆详解实现优先级队列 一.二叉堆概览 二.优先级队列概览 三.实现 swim 和 sink 四.实现 delMax 和 insert 五.最后总结 二叉堆(Bi ...
- Spring Cloud Eureka 入门 (二)服务提供者详解
2019独角兽企业重金招聘Python工程师标准>>> 摘要: 原创出处:www.bysocket.com 泥瓦匠BYSocket 希望转载,保留摘要,谢谢! "优秀不是过 ...
- Java 面向对象:封装详解
Java 面向对象:封装详解 封装:属性私有,get/set 属性私有化 提供get/set方法操作数据 优点: 1.提高程序的安全性,保护数据 2.隐藏代码的实现细节 3.统一接口 4.系统可维护性 ...
- axios的二次封装与async,await的配合使用?
前言:前些日子读文章,说是vue3.0会在明年下半年正式推出,改动的地方好像也不少,比如说vue3.x的代码库将会用typescript编写,并提供改进的 TypeScript 支持.变化还是很快的, ...
- 海康摄像头二次开发详解,包含海康摄像头登录、海康云台控制、视频下载等功能
海康摄像头二次开发详解 准备 海康摄像头SDK开发下载路径: 开发过程中遇到的问题记录: 添加maven依赖 下面代码中会出现的实体类 CameraManage实体类: ControlDto实体类: ...
- axios如何二次封装
axios二次封装的五种方法 为什么要封装 axios 的 API 很友好,你完全可以很轻松地在项目中直接使用. 不过随着项目规模增大,如果每发起一次HTTP请求,就要把这些比如设置超时时间.设置请求 ...
- axios进行二次封装
Web开发中,我们最常用的HTTP库就是Axios了,它的底层基于Ajax进行封装,在浏览器端和服务端都可以使用.如果大家对一些API不是很熟悉可以参考官方地址,或者中文社区. 为什么要对ax ...
- Vue——axios的二次封装
文章目录 一.请求和传递参数 1.get 请求 2.post 请求 3.axios 请求配置 二.axios 的二次封装 1.配置拦截器 2.发送请求 三.API 的解耦 1.配置文件对应的请求 2. ...
最新文章
- php ile_get_contents无法请求https连接的解决方法
- Gitlab完整搭建手册+排错
- matlab 电气系统设计,MATLAB 简化了控制系统的设计和分析
- 原!操作 excel 03/07
- 交公粮了:国庆在家我都逛哪些技术网站?
- django进阶03静态文件和模板
- 公众号平台服务号、订阅号、企业号区别
- 无法访问Windows7默认共享的解决方法
- github加速神器
- 微众银行再次入驻微信小程序,人人可申请,66万人提额100亿,发福利啦!!!...
- ObjectiveC, Xcode, iOS开篇导言
- [SHOI2008]小约翰的游戏John(博弈+SJ定理)
- 一条update语句更新多条sql记录
- MATLAB 生成高清 矢量图+图局部放大
- TCP RTT 采集方法
- 【机器学习】Kmeans聚类(含代码)
- C++独孤九剑第五式——人生几何(对象复制控制)
- 成为顶级博主的秘诀是什么?《乘风者周刊》专访“处女座程序猿”牛亚运
- 淘宝店主成十大高危职业 生存状态受关注
- (java)scanner.next()与scanner.nextLine()的区别