vue-封装axios的GET请求

深碍√TFBOYSˉ_ 2022-01-20 15:31 482阅读 0赞

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FJQl9LYXNpYw_size_16_color_FFFFFF_t_70][]

**传送门**：[https://www.kancloud.cn/yunye/axios/234845][https_www.kancloud.cn_yunye_axios_234845]

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

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

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

![20190611100828946.png][]

**在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);
      });

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FJQl9LYXNpYw_size_16_color_FFFFFF_t_70]: /images/20220120/61aca530d51a41bf8314a27dc172df24.png
[https_www.kancloud.cn_yunye_axios_234845]: https://www.kancloud.cn/yunye/axios/234845
[20190611100828946.png]: /images/20220120/084f6dbb4a114858b4c084db0c52da70.png

发表评论取消回复

表情：

评论列表（有 0 条评论，482人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue中axios请求的封装管理

　　vue中axios封装以及接口管理前言一、axios的封装？二、使用步骤1.安装axios2.读入数据总结欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有

爱被打了一巴掌/ 2023年09月25日 12:09/ 0 赞/ 73 阅读

相关 vue-封装axios请求

最近接手新的vue项目，发现axios竟然没有封装，立马动手封装，这里记录一下完整的封装过程，废话不说，直接上代码 baseConfig.js文件 //存放各个服

超、凢脫俗/ 2023年07月25日 08:43/ 0 赞/ 39 阅读

相关 Vue---axios-get/post请求

注：以下的 $axios 是将 axios 挂到了Vue的原型链上，这样页面可直接使用 $axios ，而不需要在页面导入axios。 Get请求方式一(不常用)：

淩亂°似流年/ 2023年07月21日 06:08/ 0 赞/ 32 阅读

相关 Vue项目 axios请求封装+接口封装

前言：接口进行封装，方便后期维护 > 先封装axios ( utils => axios.js ) import axios from "axios" i

我会带着你远行/ 2023年01月18日 04:08/ 0 赞/ 319 阅读

相关 vue axios请求封装

axios.defaults.baseURL = 'http://172.16.26.133:8080/XCPS'; //填写域名 //http request

红太狼/ 2023年01月03日 14:17/ 0 赞/ 285 阅读

相关 vue 封装axios 请求

[https://www.cnblogs.com/ldlx-mars/p/7908950.html][https_www.cnblogs.com_ldlx-mars_p_790

╰半橙微兮°/ 2022年12月25日 15:51/ 0 赞/ 250 阅读

相关 Vue axios http请求封装

转载： [https://mp.weixin.qq.com/s/VR0lXinHwPSBmS6uapji2Q][https_mp.weixin.qq.com_s_VR0lXi

àì夳堔傛蜴生んèń/ 2022年12月16日 10:59/ 0 赞/ 238 阅读

相关 vue-封装axios的GET请求

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

深碍√TFBOYSˉ_/ 2022年01月20日 15:31/ 0 赞/ 483 阅读

相关 Vue封装ajax请求的函数（axios）

使用过Vue的都知道，在vue的项目中，实现前后端交互是通过resource或者axios，而相比之中axios是使用比较多的一种。在学习的过程中，学习了解了axios的使用方

心已赠人/ 2021年10月23日 23:26/ 0 赞/ 708 阅读

相关封装axios(get和post请求)

/ ajax模块,返回值为promise对象 / / ajax模块,返回值为promise对象 / import axios from 'axios'

左手的ㄟ右手/ 2021年07月24日 12:22/ 0 赞/ 782 阅读