侧边栏壁纸
博主头像
陌上花 博主等级

回首万事皆休

  • 累计撰写 70 篇文章
  • 累计创建 11 个标签
  • 累计收到 0 条评论

目 录CONTENT

文章目录
Vue

VUE全局绑定axios

种向日葵的人
2024-08-30 / 0 评论 / 0 点赞 / 25 阅读 / 738 字

介绍

  1. 网上很多中这种方法,但是不知道为什么我使用app.config.globalProperties.$http=没办法使用,不知道啥情况,所以这里只记录可以使用的app.provide('$http',axios)
  2. 基本来说,对于前端来说,跟后端的数据交互是一件很常见也是很重要的事,因为我才刚接触vue,所以对于这一块不是很了解,今天介绍最普遍的两种方式。

直接绑定

//安装axios
//cnpm install axios 
//直接绑定中,可以直接这样使用
async function getToken1(){  
  await axios.post('url',userInfo)  
      .then(response=>{  
        console.log(response.data)  
      })  
      .catch(error=>{  
        console.log(error)  
      })  
}
const userInfo={  
  email:'aaa.com',  
  password:'bbb'  
}
//其实还是很简单的,直接使用post方法,然后传入参数,一般是一个对象。之后后面的其实就是在C#中很常见的lambda表达式

全局设置

//全局设置中需要先在main.js中设置如下
import { createApp } from 'vue'  
import App from './App.vue'  
import axios from "axios";  
  
const app=createApp(App)  
  
axios.defaults.baseURL='http://pengqian.work:17428/api/v1'  
app.provide('$http',axios)  
  
app.mount('#app')

//然后在组件(也就是vue组件)中直接导入然后使用
const $http=inject('$http')  //注意这个时候需要使用这个导入
async function getToken(){  
  await $http.post('/tokens',userInfo)  
      .then(response=>  
      {  
        console.log(response.data)  
      })  
      .catch(error=>  
      {  
        console.log(error)  
      })  
}
0
博主关闭了所有页面的评论