封装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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！