什么是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);