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

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': '',

//        },

    },

  },

},

}