Vue3 中使用 “vue-axios“

白瑕

已于 2024-09-08 03:01:20 修改

阅读量6.4k

点赞数 9

分类专栏： # Axios 文章标签： vue.js javascript 前端

于 2021-09-09 22:02:59 首次发布

本文链接：https://blog.csdn.net/qq_52697994/article/details/120210534

版权

Axios 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了在Vue3环境下如何安装和使用vue-axios。虽然axios本身仍需安装，但vue-axios提供了更方便的在Vue应用中集成axios的方法。在Vue3中直接引入axios会导致栈溢出，而vue-axios可以避免这个问题。文章详细讲解了如何将axios绑定到原型链以及通过provide/inject在全局使用。

摘要由CSDN通过智能技术生成

文章目录

前言
一、安装vue-axios
二、使用方法
总结

前言

我是在cli4.5.x + vue3环境下做的,所以代码看起来可能有些离谱.

这是一个基于vue并进行了轻度封装的axios包,里面整合了vue环境下会用到的一些axios相关.

一、安装vue-axios

这东西不能替代axios, axios还是要装的, vue-axios可选装.
在这里插入图片描述

npm i axios vue-axios --save

二、使用方法

//作者原话,大意是我开发的这个东西好处不大
//它可以将axios与vue实例绑定,这样你使用axios时就不用每次都引入(axios)了
It only has a small benefit 
that it binds axios to the vue instance
so you don't have to import everytime you use axios.

axios还是axios不会变, 该怎么请求还是怎么请求的, 但是不论Vue3还是Vue2, 我们都是不能直接在main.js里像引入element之类插件的方式引入axios的.

应该要绑定到原型链, 非得弄个$http什么的才好:

//Vue3
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios';

const app = createApp(App)

app
    .use(axios)
    .use(router)

app.mount('#app')

在这里插入图片描述
可以看到Vue3直接引入会栈溢出, 但引入Vue-axios可以解决这个问题, 实现像引入普通插件一样引入axios:

app.use(VueAxios, axios)

然而仅仅是这样并不能在全局使用, 只是main.js里可以用了, 我们总不能在main.js里发请求吧…
所以还要provide()到全局, 在需要使用的地方inject注入;

main.js:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
import VueAxios from 'vue-axios'

const app = createApp(App)

app.use(VueAxios, axios).use(router) 
//然而只是这样全局并不能用;
app.provide('axios', app.config.globalProperties.axios) 
//这句不写, 组件里无法注入全局axios, 也就无法使用

app.mount('#app')

组件:

<button @click="getList">getList</button>

//<script setup>

import { onMounted } from "vue";
import { inject } from "vue";

const axios = inject("axios");  //注入一下不然不能用

function getList() {
  axios.get("http://x.xxx.xx.xxx:3000/getHottestArticle").then((res) => {
    console.log(res);
  });
}

//</script>