vue中调用HTTP请求的详细步骤

npm install axios

<script setup lang="ts">
import axios from 'axios';
import { ref } from 'vue';

let message = ref("")

const loadBaiduInfo = async () => {
  let response = await axios.get('http://www.baidu.com/')
  message.value = response.data
}
</script>

<template>
  <div>
    <p> 数据:{{ message }}</p>
    <button @click="loadBaiduInfo">获取数据</button>
  </div>
</template>

<style scoped></style>

server: {
  //host: '0.0.0.0',
  //https : false,
  port: 18935,
  proxy: {
    '/myapi': {
      target: 'https://www.baidu.com',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/myapi/, '')
    }
  }
},

let response = await axios.get('/myapi')

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

const [acct, perm] = await Promise.all([getUserAccount(), getUserPermissions()]);

// OR

Promise.all([getUserAccount(), getUserPermissions()])
  .then(function ([acct, perm]) {
    // ...
  });