关于Vue中axios的封装实例详解

axios是Vue官方推荐的一个HTTP库,用axios官方简介来介绍它,就是:

　　

Axios是一个基于承诺的HTTP库,可以用在浏览器和节点。js中。

　　 　　

作为一个优秀的HTTP库,axios打败了曾经由Vue官方团队维护的vue-resource,获得了Vue作者尤小右的大力推荐,成为了Vue项目中HTTP库的最佳选择。

　　

虽然,axios是个优秀的HTTP库,但是,直接在项目中使用并不是那么方便,所以,我们需要对其进行一定程度上的配置封装,减少重复代码,方便调用。下面,我们就来聊聊Vue中axios的封装。

　　

　　

　　

其实,网上关于axios封装的代码不少,但是大部分都是在入口文件(主要。js)中进行axios全局对象属性定义的形式进行配置,类似于如下代码:

　　 　　 　　axios.defaults.timeout=10000 　　 　　

该方案有两个不足,首先,axios封装代码耦合进入入口文件,不方便后期维护;其次,使用axios全局对象属性定义的方式进行配置,代码过于零散。

　　

针对问题一,我使用了Vue源码结构中的一大核心思想,将功能拆分为文件,方便后期的维护。单独创建一个http。js或http者。ts文件,在文件中引入axios并对其进行封装配置,最后将其导出并挂载到Vue的原型上即可。此时,每次修改axios配置,只需要修改对应的文件即可,不会影响到不相关的功能。

　　

针对问题二,采用axios官方推荐的,通过配置项创建axios实例的方式进行配置封装。

　　

代码如下:

　　 　　//http.js 　　从“axios”进口axios//创建axios实例 　　const服务=axios.create ({//配置项 　　}) 　　 　　

　　

　　

baseURL属性是请求地址前缀,将自动加在url前面,除非url是个绝对地址。正常情况下,在开发环境下和生产模式下有着不同的baseURL,所以,我们需要根据不同的环境切换不同的baseURL。

　　

在开发模式下,由于有着devServer的存在,需要根据固定的url前缀进行请求地址重写,所以,在开发环境下,将baseURL设为某个固定的值,比如:/api。

　　

在生产模式下,根据Java模块的请求前缀的不同,可以设置不同的baseURL。

　　

具体代码如下:

　　 　　//根据process.env。NODE_ENV区分状态,切换不同的baseURL 　　const服务=axios.create ({ 　　baseURL: process.env。NODE_ENV===? # 63;/java:/api, 　　}) 　　 　　

　　

　　

在这里和大家聊一个问题,什么是封装吗?在我看来,封装是通过更少的调用代码覆盖更多的调用场景。

　　

由于,大部分情况下,请求头都是固定的,只有少部分情况下,会需要一些特殊的请求头,所以,在这里,我采用的方案是,将普适性的请求头作为基础配置。当需要特殊请求头时,将特殊请求头作为参数传入,覆盖基础配置。

　　

代码如下:

　　 　　 　　const服务=axios.create ({ 　　… 　　标题:{ 　　得到:{ 　　“内容类型”:“应用程序/x-www-form-urlencoded; charset=utf - 8”//在开发中,一般还需要单点登录或者其他功能的通用请求头,可以一并配置进来 　　}, 　　职位:{ 　　“内容类型”:“application/json; charset=utf - 8”//在开发中,一般还需要单点登录或者其他功能的通用请求头,可以一并配置进来 　　} 　　}, 　　}) 　　 　　

　　

　　

axios中,提供是否允许跨域的属性——withCredentials,以及配置超时时间的属性——超时,通过这两个属性,可以轻松处理跨域和超时的问题。

　　

下面,我们来说说响应码处理:

　　

axios提供了validateStatus属性,用于定义对于给定的HTTP响应状态码是解决或拒绝承诺。所以,正常设置的情况下,我们会将状态码为2系列或者304的请求设为解决状态,其余为拒绝状态。结果就是,我们可以在业务代码里,使用抓统一捕获响应错误的请求,从而进行统一处理。

　　

但是,由于我在代码里面使用了async-await,而众所周知,async-await捕获捕获的方式极为麻烦,所以,在此处,我选择将所有响应都设为解决状态,统一在那处理。

　　

此部分代码如下:

　　 　　 　　const服务=axios.create ({//跨域请求时是否需要使用凭证 　　withCredentials:没错,//请求30年代超时 　　超时:30000, 　　validateStatus:函数(){//使用async-await,处理拒绝情况较为繁琐,所以全部返回的决心,在业务代码中处理异常 　　还真 　　}, 　　})

关于Vue中axios的封装实例详解