封装utils目录下的request模块
在vue中使用axios发起ajax请求,可以将axios挂载到vue原型中,但是这种方法有一定的缺点,即无法实现接口的复用,导致每次需要进行操作的时候都需要进行一次接口的调用,会造成服务器资源的浪费
而在src目录下,规范的封装request模块,即发起请求用的模块,即可更加便利的调用接口和实现复用
request模块
在项目根目录的src目录下,创建utils目录,并在其中创建request.js文件,导入axios请求库
import axios from axios const request = axios.create({ baseURL: http:127.0.0.1:3000 }) export default request
并在其中使用baseURL设置请求根路径,并在最后将其向外共享
在request模块中封装发起请求的方法
单独在组件中直接调用接口的时候可以用如下方式,适用于不需要复用的请求
async getList() { const { data:res } = await request.get(/login, { // 请求参数 params: { } }) },
可以在created生命周期调用此方法并用一个data数据进行接收
created() { this.getList() }
实现接口的复用
处于规范,在项目根目录的src目录下新建api目录,将所有的接口封装到这个文件夹中
例如在api目录中封装获取列表接口,当中需要返回一个Promise类型数组
// 登录相关API接口 getListAPI.js import request from @/utils/request // 向外按需导出一个API函数 export const getListAPI = function(param1, param2) { // 其中为发起请求的代码 return request.get(/getList, { param: { param1, param2 } }) }
在需要使用上述接口的组件中导入这个接口文件,其中getListAPI方法返回值是Promise
<script> import getListAPI from @/api/loginAPI.js export default { methods: { async getList() { const { data:res } = await getListAPI(param1, param2) console.log(res) } } } </script>