Vue中Axios如何封装管理?本文详解

Vue Axios 封装

 

定义

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

特性

  • 支持Promise API

  • 拦截请求和响应

  • 转换请求数据和响应数据

  • 自动转换JSON数据

  • 客户端支持 XRSF

回归正题

在Vue 项目开发中,我们与接口打交道最多了,如何来优雅的使用Axios变得尤为重要了。 通常我们通过客户端向后端发送请求来接收接口数据,然后将这些接口数据完美的呈现到网页上。

同时,与接口打交道那么就会用到网络请求,与 Vue 结合的网络请求库有哪些呢?

  • vue-resource
  • axios 官方推荐
  • fetch

本章将使用 axios 来完成接口的请求,以及对axios 请求的封装,来满足业务开发。

一次编写, 终身受用 😁
另外注意 :光理论是不够的。在此赠送2020最新企业级 Vue3.0/Js/ES6/TS/React/node等实战视频教程,想学的可进裙 519293536 免费获取,小白勿进哦!

开始

安装axios

yarn add axios

封装http.js

创建单独文件来封装axios,封装的同时,你需要和 后端 协商好一些约定,请求头 , 状态码请求超时时间.......

引入必要的UI 提示框, 不同的状态码,提示不同的响应,

请求头 : 来实现一些具体的业务,必须携带一些参数才可以请求(例如:会员业务)

状态码 : 根据接口返回的不同status , 来执行不同的业务,这块需要和后端约定好。

请求拦截器: 根据请求的请求头设定,来决定哪些请求可以访问。

响应拦截器: 这块就是根据 后端 返回来的状态码判定执行不同业务

 

 

完整代码

配置多域名请求不同URL

一般自己写项目时, 一个接口URL 就可以了。但在实际项目开发中,一个项目可能会请求不同的服务器的url,这时,我们简单的配置下访问接口域名,然后不同域名的接口,直接换对象调用即可,这样不管有多少个不同的接口,我们都可以很好的管理使用。

完整代码

到现在 axios 基本封装完成,可以满足你基本业务需求了

axios 封装完事了, 接下来就是封装单独的业务模块请求了,这块怎么划分 完全看个人风格,, 下面我会列出 两种

业务需求注意:

  • 必须引入 http.js axios
  • 必须引入 base.js 接口url
  • 必须在Vue 入口文件下,引入业务需求 api.js,并且将api挂载到Vue 原型上
  • 剩下就是写你对应的业务需求了

风格1

所有请求都写到一个api.js 文件下

完整代码

如何使用呢?

全局挂载api.js

业务组件调用


风格2

可以新建对应组件模块的文件来管理对应的 业务请求,这样接口出现问题,定位错误快,最后将不同的文件 引入到一个 api,js 里, 这样管理起来很方便。

 

如何使用呢?

 

 


封装 与 不封装对比

没有封装, 裸奔的Axios


最后

1.到现在,Axios基本封装完事了,也封装了业务模块的请求,基本上可以满足基本的业务需求了。如果项目还需要其它需求,还可以在原有的上面进行再次封装。

封装后,如果项目由接口域名有变动,执行调用base.js下的域名对象即可。
2.光理论是不够的。在此赠送2020最新企业级 Vue3.0/Js/ES6/TS/React/node等实战视频教程,想学的可进裙 519293536 免费获取,小白勿进哦!

本文的文字及图片来源于网络加上自己的想法,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值