针对Vue3中的Axios封装问题

在src下建立utils文件夹，将axios封装在request.js文件中

// request.js
import axios from 'axios'

axios.defaults.withCredentials = true;
let baseURL = 'http://localhost:8083'
const service = axios.create({
  baseURL,
  timeout: 3000
})

//设置请求拦截器
service.interceptors.request.use(config => {
  return config;
},error => {
  console.log('请求错误：',error)
  return Promise.reject(error);
})
//设置响应拦截器
service.interceptors.response.use(response => {
  return response;
},error => { 
  console.log('响应错误:',error)
  return Promise.reject(error)
})

将GET,POST请求封装在其中

//封装get方法
export function get(url, params = {}) {
  try {
    return service({
      url,
      params,
      method: 'GET'
    })
  } catch (error) {
    console.error('get:',error);
  }
}

//封装post方法
export function post(url, data = {}) {
  try {
    return service({
      url,
      data,
      method: 'POST'
    });
  } catch (error) {
    console.error('post:', error);
  }
}

随后在src同级下建立models文件夹存放涉及到所有接口

// user.js
import { get, post } from '../utils/request.js'
import url from '../api/index.js'   //封装的后端接口地址文件
export const login = (params = null) => {
    try {
        const res = post(url.USER_LOGIN, params);
        return res
    } catch(error) {
        console.log('登陆接口错误:', error)
        return Promise.resolve(null);
    }
}

在页面文件中调用接口

// login.vue
<script>
import { login } from '../../models/user.js'
export default {
    setup() {
        const onLogin = async() => {
            const res = await loginBlog(state.dataForm)
            if (res.status === 200) {
                console.log('登录成功')
                /*数据处理*/
            }
        }
        
        return {
            onLogin,
        }
    }
}
</script>