第一步 下载axios

npm install axios --save

第二步 新建文件

• 先在src文件夹里 新建一个 utils文件夹
• 在 utils 文件里建一个axios.js 文件
• 复制代码放进去
• 下面的响应拦截和请求拦截的参数比如token，根据自己项目修改,不需要的话可以注释掉
• 除了这get 和 post请求，还有delete,put之类的请求方式，就把写get的地方替换成需要的请求方式，就OK，原理是一样的

// 引入
import axios from "axios";
// 设置axios
const service = axios.create({
    // 设置最大请求事件
    timeout: 1000 * 60,
    // 设置基础路径 
    baseURL: "/api" 
})
// 封装post请求
let post = function (url, data_ = {}) {
    return new Promise((resolve, reject) => {
        service.post(url, data_).then((res) => {
            // 成功
            return resolve(res)
        }).catch((err) => {
            // 失败
            return reject(err)
        })
    })
}
let get = function(url,data_ ={}){
    return new Promise((resolve, reject) => {
        let params = data_;
        service.get(url, {
            params
        }).then((res) => {
            // 成功
            return resolve(res)
        }).catch((err) => {
            // 失败
            return reject(err)
        })
    })
}

// 添加请求拦截
service.interceptors.request.use(config => {
    // 添加请求头
    config.headers = {
        "authorization": localStorage.token 
    }
    return config;
})
// 添加响应拦截
service.interceptors.response.use(response=> {
    return response.data
}, error=> {
    // 返回一个错误提示信息 ,处理http网络错误
    let message = ''
    let status = error.response.status
    switch (status) {
        case 400:
            message = '请求错误'
            break
        case 401:
            message = '未授权，请登录'
            break
        case 403:
            message = '拒绝访问'
            break
        case 404:
            message = `请求地址出错: ${error.response.config.url}`
            break
        case 408:
            message = '请求超时'
            break
        case 500:
            message = '服务器内部错误'
        default:
            message = '网络错误了...'
    }
    // 提示错误信息
    ElMessage.error(message)  // 这里用了一个element 的提示框，就是用来展示一下报错信息
    return Promise.reject(error)
})

// 导出
export default {
    post,
    get,
}

第三步 使用

• 可以再建一个api文件夹（src文件下面）
  在这个api文件夹里 在建的js文件就可以分一下类了
  （比如 要获取菜单列表的请求,可以用一个js文件在存放。获取用户信息的请求，可以用另一个js文件来存放。）
• 下面是每个 js 文件的基本格式

//这一句就是引入刚才建好的 axios.js文件
import axios from "../utils/axios"

// 一个登录请求
//把接口地址写好，因为它是不变的，变的是数据，可以在页面使用的时候传过来
function dl(data){
   return  axios.post('/admins/login',data) 
}

// 这一步就是导出方法  
// 比如这个方法原名是 dl 给他从命名了一个login 所以在用的时候就用的是login这个名字
// 这么写的目的就是，在方法名过长或者不够语义化的时候，可以修改一个更合适的
export {
    dl as login
}

• 然后就是在页面中怎么使用了

<script setup>
import { ref } from "vue";
//先引一下 刚才写好的js文件，我这个文件叫admins
import { login } from "../api/admins";

let inp = ref("");
let pw = ref("");
// 在点击方法里面可以执行这个login 请求
async function btn(){
 //在里面 传一个 对象
    let res = await login({
    ad_phone: inp.value,
    ad_pw: pw.value,
  });
//下面就可以接收res的值，做判断了,可以先看看res返回的是什么
console.log(res);

}
</script>

第五步 解决跨域

• 在vite.config.js里面 只需要 用 ----框起来的（这是vue3的）
• target 哪里是写后端地址的，自己是啥就写啥

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  // 设置跨域  vue3配置跨域--------
  server:{
   proxy:{
      '/api':{ // 需要注意的是这里的 /api 要与utils文件下面的axios.js文件的基础路径保持一致
        target:"http://localhost:3000", // 后端地址
        changeOrigin:true,
        rewrite: (path) => path.replace(/^\/api/,'')
      }
    }
  }
  //-----------
})

• vue2 是这样的

  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:3000",
        changeOrigin: true,//是否跨域
        pathRewrite: {//路径是否重定义
          "^/api": "", 
        }
      }
      
    }
  }

然后就全部ok了