VUE3 axios + api 封装 全局配置

安装axios

npm install axios

使用CDN引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 

/src/vite.config.js  vue的配置文件

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:{
      cors:true,  //默认启动并允许任何源
      open: false,  //默认打开浏览器
      port: 80,   //访问端口
      host: "0.0.0.0",  //访问的地址   0.0.0.0  即所有可访问的host
      proxy:{
        '/api': {
          target: `url`,   //后端目标地址 
          ws: true,
          secure: true,
          changeOrigin:true,   //是否允许跨域代理
          rewrite:(path) => path.replace(/^\/api/, '')    //重写路径   vue3写法  vue2写法：pathWrite:{}
        }
      },
    },
})

/src/utils/request.js 封装axios

import axios from 'axios'

const instace = axios.create({
    baseURL: '/api',   //vite.config.js文件中的代理端口
    timeout: 5000
})

//封装请求的api
const callapi = (method = "GET", url, data = {}) => {
    return instace({
      method,
      url,
      params: method === "GET" ? data : {},
      data: method === "POST" ? data : {},
    });
  };
  //封装GET请求函数
  export const getapi = (url, data) => callapi("GET", url, data);
  export const postapi = (url, data) => callapi("POST", url, data);
  

export default instace

/src/api/getList.js 要封装的接口

import {getapi,postapi} from '@/util/request'

export const getList = () => getapi('url')   //api 路径

 实际后端数据获取

<template>
  //你的代码
</template>

<script> 
import { getList } from '@/api/bloglist'  //引入api

export default {
  data(){
    return{
      tableData:[   //接取后端所传的值
      {
      date: '',
      name: '',
      description: '',
      },
      ]
    }
  },

  created(){
    this.getList()
  },

  mounted(){

  },

  methods:{
    getAllList(){
      getList().then(resp => {
        this.tableData = resp.data
        console.log(resp.data)
      })
    },
  }

}
</script>

成功获取到数据