vue项目开发api层架构

什么是axios?

官方解释：Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

axios 为了方便使用也提供了很多请求方法的别名：

axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.options(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]])

而对于使用也有多种方式

1、有部分人喜欢在页面中直接使用

这样是很不好的方式，不利于维护，如果哪天需要修改url,那么修改涉及到的页面可能会很多。

2、我们可以对axios进行封装，将axios封装，配置、响应拦截、请求方法都在一个request.js文件中

在api.js中调用request.js请求设置URL

在到页面中调用

getUsers({data:''}).then((res)=>{

//处理返回结果

})

这样封装了axios,基本就满足了我们的需求，目前一些应用框架都是这样写的，比如vue-admin。 之前，我也是使用这种方式。

3、上一种方式如果要定义一个接口，需要在api.js 去调用request.js的方法。

而接下来说的只需要按模块配置URL和请求方式就可以了。

定义一个server.js文件，用来创建axios实例，配置和响应拦截。

定义一个getRequest.js 文件，将传过来的模块对象生成对应的api接口，可默认处理返回结果，如需要特殊处理可传success回调函数，也可使用promise的方式。

api.js文件，只需要配置url和type就可以。

页面调用 需要引入api.js文件，或者将api.js挂载到Vue.prototype.$api上

this.$api.vueCase(this)

this.$api.system.login(data);