关于axios如何全局注册浅析

红太狼 2023-09-25 12:09 109阅读 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

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);

\})

\}

\}

\}

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

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。

您可能感兴趣的文章:axios基本入门用法教程axios学习教程全攻略详解Vue 2.0封装axios笔记关于使用axios的一些心得技巧分享vue axios用法教程详解详解Vue.js 2.0 如何使用axiosvue-axios使用详解

发表评论取消回复

表情：

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

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

相关阅读

相关 ElementUI实现登录注册啊，axios全局配置，CORS跨域

一，项目搭建认识ElementUI ElementUI是一个基于Vue.js 2.0的桌面端组件库，它提供了一套丰富的UI组件，包括表格、表单、弹框、按钮、菜单等

￡神魔★判官ぃ/ 2023年10月16日 14:03/ 0 赞/ 78 阅读

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

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

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

相关 vue-cli的项目中关于axios的全局配置

[https://www.cnblogs.com/qiuchuanji/p/10048805.html][https_www.cnblogs.com_qiuchuanji_p_

朱雀/ 2023年06月18日 14:56/ 0 赞/ 182 阅读

相关 axios 全局配置

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

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

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

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

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

相关关于axios

简介 axios是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中主要是用于向后台发起请求的，还有在请求中做更多是可控功

痛定思痛。/ 2022年03月19日 14:24/ 0 赞/ 208 阅读

相关关于axios

简介 axios是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中主要是用于向后台发起请求的，还有在请求中做更多是可控功

我就是我/ 2022年03月06日 21:08/ 0 赞/ 239 阅读

相关 vue 全局使用 axios

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

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

相关 axios如何全局注册

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

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

相关 axios如何全局注册

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

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