vue3 HTTP请求中的axios示例详解

npm install axios --save

import axios from 'axios';

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

<template>
    <div>
        <div v-if="!repositoryUrl">loading...</div>
        <div v-else>most star repository is <a :href="repositoryUrl" rel="external nofollow"     >{{repositoryName}}</a></div>
    </div>
    <!--App -->
</template>

<script>
    import axios from 'axios';
    
    export default {
        data() {
            return {
                repositoryUrl : '',
                repositoryName : ''
            }
        },
        
        mounted() {
            // 发ajax请求，用以获取数据，此处地址意思是查询 github中 vue 星数最高的项目
            const url = 'https://api.github.com/search/repositories?q=vue&sort=stars';
            
            axios.get(url).then(
                response => {
                    const result = response.data.items[0];
                    console.log(result)
                    this.repositoryUrl = result.html_url;
                    this.repositoryName = result.name;
                }
            ).catch(
                response => {
                    alert('请求失败');
                },
            );
        }
    }
</script>

<style>

</style>

const url = '/api/v1/web3/url/list_by_category';

let data = {"category":"tools"};

axios.post(url,data).then(
  response => {
    const result = response.data.data;
    console.log(result)
    this.repositoryName = result.name;
    this.web3_urls = result


  }).catch(response => {
    alert('请求失败');
  },
  );

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'https://www.xxx.com/', //接口域名
                changeOrigin: true,             //是否跨域
                ws: true,                       //是否代理 websockets
                secure: true,                   //是否https接口
                pathRewrite: {                  //路径重置
                    '^/api': ''
                }
            }
        }
    }
};

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    proxy: {
      '/api': {
          target: 'http://127.0.0.1:8000/', //接口域名
          changeOrigin: true,             //是否跨域
          ws: false,                       //是否代理 websockets
          secure: false,                   //是否https接口
          pathRewrite: {                  //路径重置
              '^/api': ''
          }
      }
    }
  }
})