526互联

vue3中的axios进行封装代理的使用（webpack）

发布时间 2023-09-19 11:32:00作者: 妞妞猪

1.安装axios

npm install axios

2.在util文件夹下新建axios.js文件，用来处理axios拦截器

axios.js内容：（注意：其中router需要写成这种形式，不然会报 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'push') 错误）

/**
 * 文件主要用来创建 axios 实例，然后添加请求拦截器和响应拦截器
 */
 
import axios from 'axios'
import { showToast  } from 'vant'
import { getToken } from '../util/auth' //这是cookies用来处理token的文件
import { router } from '../router'
// 1.定义存放后端请求的服务地址的常量。
 
const basePath = ''; // http://localhost:8085
 
 
 
// 2.创建 axios 实例
 
const axiosInstance = axios.create({
 
  baseURL: basePath,
 
  withCredentials: true,  //是否允许跨域
 
  timeout: 8000
 
})
 
// 3.添加axios实例的请求拦截器
 
axiosInstance.interceptors.request.use(
 
  config => {
 
    // 发送请求之前（可以在这里给头部添加token）
    if (getToken()) {
      config.headers['Authorization'] = 'Bearer ' + getToken()
    }
    return config;
 
  },
 
  error => {
 
    // 请求错误
 
    console.log(error)
 
    return error;
  }
)
 
 
// 4.添加axios实例的响应拦截器。
 
axiosInstance.interceptors.response.use(
 
  response => {
 
    //console.log("axios响应拦截器的数据：",response);
 
    /**
     *  对响应数据判断:
     *  如果成功返回数据，就通过return把数据返出去
     *  如果请求不成功，就在拦截器这里统一处理（组件的代码就不用关注错误的情况了）
     */
 
    if(response.status==200){
 
  // 请求成功，根据实际的后端返回值进行返回，此项目的后端返回值放在对象的data中，因此是response.data
 
      return response.data;
 
    }else{
 
      // 请求失败，通过函数 handleErrorData 对错误消息统一处理。
 
      //handleErrorData(response.data);
 
    }
 
    return response;
 
  },
 
  error => {
 
    // 响应错误-axios响应拦截器的错误数据
 
    //  响应错误的拦截 通过函数 handleErrorData 对错误消息统一处理。
    handleErrorData(error.response);
    return error;
 
  }
 
)
 
// 对错误信息的处理函数
 
function handleErrorData(errMes){
 
   if(errMes.data){
 
    showToast(errMes.message);
 
   }else{
 
     switch(errMes.status){
 
       case 401 :
 
          showToast("未授权，请重新登录!")
          router.push('/login')
 
         break;
 
       case 403 :
 
        showToast("拒绝访问");
 
         break;
 
       case 404 :
 
        showToast("很抱歉，资源未找到!");
 
         break;
 
       case 500 :
 
        showToast("服务器错误!");
 
         break;
 
       case 504 :
 
        showToast("网络超时!");
 
         break;
 
       default :
 
        showToast("服务正在联调中，请稍后!");
 
         break;
 
     }
 
   }
 
}
 
export {axiosInstance}

 request.js文件中写入

/**
 * 文件主要封装 axios 的get、post等方法
 */
 
import { axiosInstance as axios } from "./axios.js"
 
 
 
// 以get方式进行请求
 
export function axiosGet(url,parameter={}) {
 
    //debugger
 
    return axios({
 
        url: url,
 
        method: 'get',
 
        params: parameter
 
    })
}
 
 
 
// 以post方式进行请求
 
export function axiosPost(url,parameter={}) {
 
    return axios({
 
        url: url,
 
        method:'post' ,
 
        data: parameter
 
    })
 
}

api.js文件中写入（该文件用来处理接口信息）

import { axiosGet, axiosPost } from './request'
export const login = (data) => {//登录
    return axiosPost('/api/login', data)
}
 
组件中使用方法
<script setup>
import { ref } from 'vue';
const loginInfo = ref({
　　username:'',
　　password:''
})
const onSubmit = async () => {//登录
    await login(loginInfo.value)
    .then(res=>{
        console.log(res)//成功
    })
    .catch(error=>{
        console.log(error)//失败
    })
};
</script>
在vue.config.js中使用
module.exports = {
  // 关闭语法检查
  lintOnSave: false,
  devServer: {
    // https: false,
    //open: true, // 是否自动弹出浏览器页面
    port: 8095,
    proxy: {
      //  /api 表示拦截以/api开头的请求路径
      '/api': {
        target: "xxx", // 跨域的域名（不需要重写路径）
        ws: true, // 是否开启websockede
        changeOrigin: true, // 是否开启跨域
  //        pathRewrite: {  //这里不要重写路径，不然会代理失败(这是我遇到的问题)
  //          '^/api': '',
  //        },
      },
    },
  },
}
参考
https://www.cnblogs.com/littleDinosaurs/p/17419899.html
https://blog.csdn.net/qq_34297287/article/details/124890420