vue3+vite3（二）配置axios

1. 安装axios

yarn add axios

2. 新建utils/request.js文件

import axios from 'axios'


const service = axios.create({
    baseURL:'',
    timeout:8000,

})

export default service

3. 设置main.js

import service from './utils/request'

const app = createApp(App)

//也可以这样设置https://blog.youkuaiyun.com/serdonty/article/details/113774575
app.config.globalProoerties.$service = service

app .use(service).mount("#app")

4. 页面使用

<script setup>
import service from '../utils/request'

const getData= ()=>{
    service({
       url:"'
    }).then(res=>{
        console.log(res)
    }).catch(err=>{
        console.log(err)
    })
}

getData()
</script>

5.设置跨域

5.1 根目录设置vue.congfig.js文件

server: {
    proxy: {
      '/api': {
        target: 'https://www.xxxx.com/', // 后端服务实际地址
        changeOrigin: true, //支持跨域
        rewrite: (path) => path.replace(/^\/api/, ""),
      }
    }
  }

5.2 设置axios的baseURL

const service = axios.create({
  baseURL: '/api',
  timeout: 10000,
})

5.3 页面请求

	service({
		url: "test"//test前会自动添加请求的baseURL
	})
		.then(result => {
			console.log(result);
		})
		.catch(err => {
			console.log(err);
		});