vue3 axios

1、vue3安装

npm init vue@latest

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

> cd <your-project-name>
> npm install
> npm run dev

2、axios 安装

axios 官网：https://axios-http.com/

• 安装

npm install axios

• 配置网络请求:\src\utils\request.js（自己创建该文件）

import axios from 'axios'

export function request(config) {
 const instance = axios.create({
   baseURL: '/api',
   timeout: 5000,
   withCredentials: true,
   headers: { 'X-Custom-Header': 'foobar' }
 })

 // 添加请求拦截器
 instance.interceptors.request.use(
   function (config) {
     // 在发送请求之前做些什么
     return config
   },
   function (error) {
     // 对请求错误做些什么
     return Promise.reject(error)
   }
 )

 // 添加响应拦截器
 instance.interceptors.response.use(
   function (response) {
     // 2xx 范围内的状态码都会触发该函数。
     // 对响应数据做点什么
     return response
   },
   function (error) {
     // 超出 2xx 范围的状态码都会触发该函数。
     // 对响应错误做点什么

     console.log(error)

     return Promise.reject(error)
   }
 )

 return instance(config)
}

3、配置api接口：src/api/index.js（没有该文件自己创建）

import { request } from '../utils/request'

export function getCategory() {
  return request({
     url: '?r=111&username=admin&password=123456',
    method: 'get'
  })
}

4、vite 配置代理:vite.config.ts

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://your.domain.com/',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },

})