axios拼接写法

`http://192.168.10.8:8882/cameraAlert/cameraalert/${id}`

'http://192.168.10.8:8882/cameraAlert/cameraalert?id=' + id

'http://192.168.10.8:8882/cameraAlert/cameraalert/ ' + id

一、安装axios插件

npm install axios --save
//或者 yarn add axios
//或者 cnpm install axios --save

二、如何使用

1、在需要使用的组件中引入 axios模块import axios from 'axios'

2、使用 axios.get 或者 axios.post 请求数据

<template>
  <div>
    <button @click="getData()">获取api数据</button>
  </div>
</template>

<script>
//1、引入 axios 模块
import axios from 'axios'
export default {
  data() {
    return {
      msg: "主页"
    }
  },
  methods:{
   getData(){
      var api="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
      //2.使用axios 进行get请求
      axios.get(api).then((res)=>{
        //请求成功的回调函数
        console.log(res)
      }).catch((err)=>{
        //请求失败的回调函数
        console.log(err)
      })
   }

  }
};
</script>

三、全局配置 axios

1、在 main.js中全局配置

三、全局配置 axios

1、在 main.js中全局配置

复制代码
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import Axios from 'axios';//引入axios

var app=createApp(App)
app.config.globalProperties.Axios=Axios //全局配置axios

app.use(store).use(router).mount("#app");

2、使用的时候直接使用 this.Axios.get 或者 this.Axios.post 请求接口 vue3使用时不用this

直接

 axios.get(url).then((res) => {

                console.log(res, "获取数据");

 });

 

 

复制代码
 getData(){
      var api="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
      //2.使用axios 进行get请求
      this.Axios.get(api).then((res)=>{
        //请求成功的回调函数
        console.log(res)
      }).catch((err)=>{
        //请求失败的回调函数
        console.log(err)
      })
   }
复制代码