封装utils目录下的request模块

最新推荐文章于 2025-01-08 17:06:01 发布

原创最新推荐文章于 2025-01-08 17:06:01 发布 · 4.3k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

Vue 同时被 2 个专栏收录

29 篇文章

订阅专栏

axios

1 篇文章

订阅专栏

本文介绍了如何在Vue项目中通过创建request模块，规范封装axios，实现接口复用，降低服务器资源消耗。通过创建src/utils/request.js文件，设置基础URL，并提供复用的API接口，让组件间更便捷地调用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在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>