vue3.x之全局配置axios以及使用get post请求

最新推荐文章于 2025-01-10 15:07:44 发布

酸奶羊驼

最新推荐文章于 2025-01-10 15:07:44 发布

阅读量932

点赞数 2

文章标签： javascript vue.js 前端

本文链接：https://blog.youkuaiyun.com/ZRN0919/article/details/123494405

版权

本文介绍了如何在Vue项目中全局安装和配置Axios，通过在main.js文件中导入并挂载到全局属性，设置默认的API根目录，简化后续的HTTP请求。示例展示了如何进行GET和POST请求，以及如何处理返回的数据。通过这种方式，可以避免在每个组件中重复配置 Axios，提高代码复用性。

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

全局配置axios

安装

npm install axios --save

在main.js中全局配置

//引入
import axios from 'axios';
//全局挂载
const app = createApp(App);
app.config.globalProperties.$http = axios;//这里的$http就可以代替axios出现了
//配置根目录,(防止代码冗余
axios.defaults.baseURL = 'api根目录';
//注意后续使用app时要用 app.xxxxxx 而不是默认的createApp(App).xxxxxx
app.use(router).mount("#app");

使用axios

get请求

//$http === axios
this.$http
      .get("api具体要请求的地址", {
      //params 中以对象的形式给后端传参
        params: {
          这里是与后端约定好的变量名称: xxx,
        },
      })
      //回调函数
      .then((res) => {
        this.$data.xxx= res.data.data;//用本地变量接受返回的数据,这里的第二个data根据接口文档来
      });
      //this.$data.xxx注意访问本地变量时要在data前加$