axios如何全局注册

绝地灬酷狼 2022-01-19 03:05 284阅读 0赞

> 最近用 Vue 写项目的时候，用到 axios ，因为 axios 不能用 Vue.use() ，所以在每个 .vue 文件中使用 axios 时就需要 import ， .vue 文件少的话还好说，多的话未免有点麻烦。 后来想了想，能不能直接把 axios 加到 Vue 的原型中，这样就达到了全局注册了。

## 1. 首先在 main.js 中引入 axios ##

import Vue from 'vue'
    import axios from 'axios'
    //把 `axios` 加到 `Vue` 的原型中
    Vue.prototype.axios = axios;
    new Vue({
        el: '#app',
        render:h => h(App)
    })
    复制代码

## 2. 在 .vue 文件中使用时，注意 axios 前要加 this ##

<script>
    export default {
        name:'app',
        data(){
            return{
                msg:'hello'
            }
        },
        methods:{
            send(){
                // 注意：因为 axios 是加到 Vue 的原型中了，所以使用 axios 方法时，前面需要加 this
                this.axios.get('https://www.baidu.com*******')
                .then(resp => {
                    console.log(resp.data)
                }).catch(err => {
                    console.log(err);
                })
            }
        }
    }
    </script>
    复制代码

嗯，就这样，结果当然是没有问题的啦！

转载于:https://juejin.im/post/5cc7b1a5f265da036b4a711b

发表评论取消回复

表情：

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

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

相关阅读

相关关于axios如何全局注册浅析

　　前言　　最近用 Vue 写项目的时候，用到 axios ，因为 axios 不能用 Vue.use() (详细介绍可以参考这篇文章)，所以在每个 .vue 文件中使用

红太狼/ 2023年09月25日 12:09/ 0 赞/ 15 阅读

相关 axios 全局配置

// 配置请求的基准URL地址 axios.defaults.baseURL = 'http://localhost:3000/'; // 配置请求头信

古城微笑少年丶/ 2023年01月08日 04:26/ 0 赞/ 147 阅读

相关 VUE_vue全局注册组件，uni-app全局注册组件，vue批量注册全局组件

单个组件注册 main.js import empower from '@/components/empower/index.vue' Vue.comp

深藏阁楼爱情的钟/ 2023年01月06日 11:48/ 0 赞/ 172 阅读

相关 Vue封装axios 并注册为全局函数

npm install axios(或在index.html引入axios文件) 在src目录下新建api文件夹，将http请求相关文件统一管理 ![20190901192

「爱情、让人受尽委屈。」/ 2022年05月14日 00:48/ 0 赞/ 292 阅读

相关 axios 全局设置 token 信息

在[上篇][Link 1]中我们学习了什么是 token，本篇介绍前端如何全局设置每次请求都带上从后端获取来的 `token` 当然不全局设置也可以，那只能在每次请求都去 `

一时失言乱红尘/ 2022年04月24日 01:46/ 0 赞/ 428 阅读

相关 vue 全局使用 axios

vue 全局使用 axios，可以直接在 main.js 中引入 axios；也可以对 axios 进行封装，封装之后再引入到 main.js 中。总之要想全局使用，就得引入到

水深无声/ 2022年01月26日 14:25/ 0 赞/ 567 阅读

相关 axios如何全局注册

> 最近用 Vue 写项目的时候，用到 axios ，因为 axios 不能用 Vue.use() ，所以在每个 .vue 文件中使用 axios 时就需要 import ，

绝地灬酷狼/ 2022年01月19日 03:05/ 0 赞/ 285 阅读

相关 vue_全局注册过滤器

在一个项目中, 某些过滤器全局都有可能用的到, 统一管理并自动化全局注册是很方便的. 代码如下, 后续只需要在src/filters/index.js中添加方法就可以全局使用

向右看齐/ 2021年12月14日 10:43/ 0 赞/ 461 阅读

相关 vue 中 axios 全局配置

在请求接口的时候做全局处理, 便于管理和维护 axios 全局配置 base.js import axios from "axios"; import q

青旅半醒/ 2021年09月19日 08:22/ 0 赞/ 489 阅读

相关 axios如何全局注册

最近用 Vue 写项目的时候，用到 `axios` ，因为 `axios` 不能用 `Vue.use()` ，所以在每个 `.vue` 文件中使用 `axios` 时就需要 `

今天药忘吃喽~/ 2021年07月26日 18:00/ 0 赞/ 379 阅读