Vue axios统一接口管理的方法

通过axios请求接口很简单，但是最近我在做一个vue项目，想着把axios请求重新打包，这样api就可以只在一个地方配置成一个方法，使用的时候可以直接调用这个方法。

但是我们不需要将每个接口都定义为冗长的axios请求方法。既然我们想要简单，我们就尝试在一个地方完成简单的配置。

1.配置api接口

将同一模块的接口放在一个文件下。比如我定义了一个global.js作为src services下的global service的配置，里面配置的api可以作为这个服务的方法。

例如：

name字段将用作稍后调用的方法的名称，但这只是一个简单的对象。现在我们定义这个方法，并把它变成一个方法。

2.将接口配置的数组对象转换为方法

从“axios”导入axios；const with xios=APiconfig={ const service map={ }；apiConfig.map(({ name，url，method })={ serviceMap[name]=异步函数(data={ }){ let key=' params '；if(method===' post ' | | method==' put '){ key=' data '；}返回axios({ method，url: '/api' url，[key]: data })；};});返回serviceMap};导出带有操作的默认值；在utils下，我们定义了一个带有xios的通用方法，用于将api配置文件转换为包含方法的对象。

3.在api配置文件中使用withAxios

'从导入带有操作'./utils/with xios '；const APiconfig=[{ name : ' UserLogin '，url: '/login '，method: 'get' }，{ name: 'getUserInfo '，url: '/login/user '，method: 'get' }，{ name: 'getDeptList '，url: '/login/department '，method : ' get ' }]；导出默认值withexios(APiconfig)；直接导出打包的对象。

4.用于vuex

要调用vuex中的api，首先导入刚刚导出的对象

从“@/services/global”导入GlobalService调用正在运行的接口：

const { data }=wait GlobalServiCe . UserLogin(有效负载)；就这样。之后，只需要两个步骤，配置和调用，就可以完成接口调用。

5.axios的其他配置

我们可以在withAxios of utils中对axios进行一些常规设置。

例如，身份验证会自动在每个请求头中进行：

axios . defaults . headers.common[' Authorization ']=GetCooKie(' jwt ')| | ' '；//注意：这只会在web应用程序初始化时配置，成功登录后需要重新配置Authorization。例如，使用拦截器统一处理返回的对象：

axios . interceptors . response . use(response={ const { data }=response；if(data . status===-2){ vue . prototype . $ message . error(`无效登录信息或无效登录，请重新登录`)；DelCooKie(' jwt ')；router . push({ path : '/log in ' })；} if(数据。status===-1) {vue。原型。$消息。错误(`出现错误[$ { data . message }]`)；}返回响应；});摘要

以上就是边肖介绍的Vue axios实现统一接口管理的方法。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！