vue-封装axios的GET请求

最新推荐文章于 2025-05-22 10:43:06 发布

2025专业AI写手!

最新推荐文章于 2025-05-22 10:43:06 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue.js 文章标签： axios vue

本文链接：https://blog.youkuaiyun.com/AIB_Kasic/article/details/91413012

vue.js 专栏收录该内容

85 篇文章

订阅专栏

本文介绍在Vue项目中如何封装Axios的GET请求，通过创建utils/api.js文件并导入必要的模块，实现参数序列化及请求响应处理，提供全局调用的方法。

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

get请求的用法在其官方文档如下

传送门：https://www.kancloud.cn/yunye/axios/234845

可以看见其中的参数是由 {params:{}} 组成。

接下来我们对此进行企业上的实用封装---

在vue项目的src下新建个目录，这里我取名为 utils 文件名为 api.js ->如下

在api.js中引入如下文件

import qs from 'qs'  //序列化请求参数 形式  a&&b
import axios from 'axios'  //axios请求
import router from '../router'        //路由

开始进行封装...在api.js中export default输出函数中键入如下代码（以下包涵了export default）

export default {
  install(Vue, options) {

    Vue.prototype.$GetAPI =(url, params) => {
      return axios.get(url,{params})
        .then(Res => Res.data)
    }

至此就封装完成啦---使用方法↓

在main.js中全局引用 api

Vue.use(api)  //此方式为安装api.js，因为api.js中有 install(Vue, options)因此需要安装

在需要axios请求的文件中请求如下

this.$GetAPI('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });