Vue3+Vant4.x使用useAxios+axios封装网络请求和设置代理

安装

useAxios是从@vueuse/integrations/useAxios中导入的自定义钩子，用于简化axios的使用。

yarn add axios  @vueuse/integrations

导入需要的模块和库

import { useAxios } from '@vueuse/integrations/useAxios' // 导入VueUse库中的useAxios函数
import axios from 'axios' // 导入Axios库
import { showToast } from 'vant'

创建一个Axios实例，设置一些全局配置

const instance = axios.create({
  baseURL: 'https://api.example.com', // 替换成你想要的baseURL
  withCredentials: false, // 是否携带凭证，默认为false
  timeout: 5000 // 请求超时时间，默认为5秒
})

添加请求拦截器

用于在发送请求之前做一些处理：

instance.interceptors.request.use(
  (config) => {
    // 在请求发送之前的处理逻辑
    const token = store.state.user.token

    if (token) {
      // 每个请求都带上token
      config.headers = {
        ...config.headers,
        Authorization: `Bearer ${token}`
      }
    }
    return config
  },
  (error) => {
    // 请求错误的处理逻辑
    console.log(error) 
    return Promise.reject(error)
  }
)

添加响应拦截器

用于处理服务器返回的响应：

instance.interceptors.response.use(
  (response) => {
    const res = response.data;
    // 如果自定义的code不是200，则判断为错误
    if (res.code !== 200) {
      showToast(res.msg);
      // 401: Token过期;
      if (res.code === 401) {
        //返回登录页面
      }
      return Promise.reject(res.msg || 'Error');
    } else {
      return res;
    }
  },
  (error) => {
    console.log('err' + error);
    showToast(error.message); 
    return Promise.reject(error.message);
  },
);

导出`useAxiosApi`

export default function useAxiosApi(url, config) {
  return useAxios(url, config);
}

使用

<script setup>
import useAxiosApi from '@/utils/useAxiosApi'
import { onMounted } from 'vue'
onMounted(() => {
  fetchData()
})
const fetchData = async () => {
  try {
    const config = {
      method: 'GET' // 请求方法，可以是GET、POST等
      // 其他请求配置，例如headers、params等
    }
    const response = await useAxiosApi('api/list', config)
    console.log(response) // 处理响应数据
  } catch (e) {
    console.log(e)
  }
}
</script>

配置代码

这里顺便讲一下设置proxy代理配置，在vite.config.js文件中

 server: {
    proxy: {
      '/api': {
        target: 'https://api.example.com', // 替换为后端服务的地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^/api/, '')
      }
    }
  },

完整代码

import { useAxios } from '@vueuse/integrations/useAxios' // 导入VueUse库中的useAxios函数
import axios from 'axios' // 导入Axios库
import { showToast } from 'vant'

//创建一个Axios实例
const instance = axios.create({
  baseURL: 'https://api.example.com', // 替换成你的baseURL
  withCredentials: false, // 是否携带凭证，默认为false
  timeout: 5000 // 请求超时时间，默认为5秒
})

//添加请求拦截器
instance.interceptors.request.use(
  (config) => {
    // 在请求发送之前的处理逻辑
    const token = store.state.user.token

    if (token) {
      // 每个请求都带上token
      config.headers = {
        ...config.headers,
        Authorization: `Bearer ${token}`
      }
    }
    return config
  },
  (error) => {
    // 请求错误的处理逻辑
    console.log(error) // 调试用
    return Promise.reject(error)
  }
)

instance.interceptors.response.use(
  (response) => {
    const res = response.data
    // 如果自定义的code不是200，则判断为错误
    if (res.code !== 200) {
      showToast(res.msg)
      // 401: Token过期;
      if (res.code === 401) {
        //返回登录页面
      }
      return Promise.reject(res.msg || 'Error')
    } else {
      return res
    }
  },
  (error) => {
    console.log('err' + error)
    showToast(error.message)
    return Promise.reject(error.message)
  }
)

//导出
export default function useAxiosApi(url, config) {
  return useAxios(url, config)
}