axios同时多个请求_Vue中Axios的封装管理

Axios 封装

定义

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

特性

• 支持Promise API

• 拦截请求和响应

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

• 自动转换JSON数据

• ##### 客户端支持 XRSF

回归正题

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

同时&＃xff0c;与接口打交道那么就会用到网络请求&＃xff0c;与 Vue 结合的网络请求库有哪些呢&＃xff1f;

• vue-resource

• axios   官方推荐

• fetch

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

一次编写&＃xff0c; 终身受用 ?

开始

安装axios

yarn add axios

封装http.js

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

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

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

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

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

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

配置多域名请求不同URL

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

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

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

业务需求注意:

• 必须引入 http.js  axios

• 必须引入 base.js  接口url

• 必须在Vue 入口文件下&＃xff0c;引入业务需求 api.js,并且将api挂载到Vue 原型上

• 剩下就是写你对应的业务需求了

风格1

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

如何使用呢&＃xff1f;

全局挂载&＃96;api.js&＃96;

业务组件调用

风格2

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

如何使用呢&＃xff1f;

封装 与 不封装对比

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

封装后&＃xff0c;如果项目有接口域名有变动&＃xff0c;执行调用base.js下的域名对象即可。

历史精彩文章&＃xff1a;

2020前端技术面试必备Vue:(一)基础快速学习篇

2020前端技术面试必备Vue:(二)Router篇

2020前端技术面试必备Vue&＃xff1a;(二)组件篇

2020前端技术面试必备Vue&＃xff1a;(四)Vuex状态管理

以上是Vue全家桶系列

全栈进阶&＃xff1a;Nginx基本功能及其原理

TypeScript 快速入门(基础篇)
MYSQL常用操作指令

更多精彩文章在公众号

                                                                  原创不易 &＃xff0c; 觉得不错 点个赞?

“写文章不挣钱&＃xff0c;交个朋友”