封装axios请求

最新推荐文章于 2025-04-18 09:00:03 发布

WangZhiGui~

最新推荐文章于 2025-04-18 09:00:03 发布

阅读量255

点赞数 1

文章标签： vue.js ajax

本文链接：https://blog.youkuaiyun.com/gui3135926448/article/details/129194659

版权

文章介绍了如何使用axios封装网络请求基础地址，并在src/utils/request.js中创建API模块。然后在src/api目录下，按照模块化原则封装各个API接口，以便于在项目中按需导入和使用。示例中展示了获取所有频道列表的API方法在组件中的应用。

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

1.封装网络请求，也就是封装网络地址前缀

每个人封装都有每个人自己的习惯，我一般习惯在src文件下新建utils文件夹，里面存放一个reques.js文件来封装网络请求

// 封装网络请求 也就是接口地址前缀
import request from 'axios'
const axios = request.create({
  baseURL: 'http://geek.itheima.net'
})
export default axios

2.封装各各API接口请求,也就是把各各API接口请求封装成为一个API方法,以后如果哪个组件模块用到这个请求，则只需要调用此方法即可

在src文件下新建api文件夹，里面存放一个index.js文件来存放所有的API接口请求方法，

但一般工作中都不会把所有的接口都放在一个index.js，而是进行模块划分，建立对应文件存放相应api,这是就不展示示例代码了😃

// api文件用来封装各各接口,在以后各各组件谁用到哪个网络请求，直接导入其接口对应封装好的API方法即可
import request from '@/utils/request.js'
export const allChannelListAPI = () => {
  // 封装一个方法，在这个方法里面定义接口请求,最后注意要return 回去
  return request({
    url: 'v1_0/channels',
    method: 'get'
  })
}

3.哪个模块需要用到此方法,只需按需导入这个API模块中对应的API方法即可

<template>
  <div>app ***项目</div>
</template>

<script>
import { allChannelListAPI } from '@/api/index.js'
export default {
  name: 'MyApp',
  async created () {
    const res = await allChannelListAPI()
    console.log(res)
  }
}
</script>

<style lang="less" scoped></style>