众里寻他千百度、蓦然回首、那人却在灯火阑珊处。

Vue3之Axios使用

一、安装

pnpm install axios

二.创建环境文件

根目录新建 .env.development  
## title
VITE_APP_TITLE = 开发环境
##baseurl
VITE_BASE_API = 'http://localhost:5173/'

根目录新建 .env.production

三、封装

import axios from "axios"
console.log(import.meta.env)

axios.defaults.baseURL= import.meta.env.VITE_BASE_URL;
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;

/* 请求拦截器 */
axios.interceptors.request.use(
    (config) => {
        const token = localStorage.getItem('authToken');
        config.headers.token = token
        
        return config
    },
    (error) => {
        return Promise.reject(error)
    },
)

/* 响应拦截器 */
axios.interceptors.response.use(
    (res) => {
        if (res.data.code !== 0) {
            Toast.error(data.msg)
        }
        return res.data
    },
    (error) => {
        return Promise.reject(error)
    },
)

export default axios;

项目引入使用

• 其一

import axios from './axios'；

let listdata = ref([])
const getList = async ()  => {
  let {data} = await axios.get('/api/img')
  listdata.value = data
}

• 其二

import axios from './axios'；

/* 导出获取用户信息 */
export const getUserInfo = (data:object)=> {
    1.
    return axios({
        url: `/user/getUserInfo`,
        method: 'post',
        data
    })
    2.
    return axios.post('/api/img',data)
}

/* 引入获取用户信息 */
import { getUserInfo } from './httpApi'

let listdata = reactive([])
const getList = async () => {
  let data = reactive({
      uid: 123,
      name: '苏木'
  })
  let {data:listdata} = await getUserInfo(data)
}

• 其三

import { getUserInfo } from './httpApi'

let listdata = reactive([])
let getlist = async () => {
    const res = await getUserInfo({
        uid: 123,
        name: '苏木'
    })
    listdata = res.data
}