fe-manage/src/api/request.js

import {reactive, ref, toRefs, watch} from "vue";
import axios from 'axios';
import {getCookie} from "@/api/method";


export function useBoeApiPage(_url, params = {}, config = {
    init: true,
    result: res => res.result,
    totalPage: res => res.result.totalPage,
    total: res => res.result.totalElement
}) {

    const state = reactive({
        data: [],
        loading: false,
        page: 1,
        pageSize: 10,
        totalPage: 0,
        total: 0
    })

    function fetch() {
        console.log('params', params)
        state.loading = true
        return request(_url, params).then(r => {
            state.data = config.result(r)
            state.totalPage = config.totalPage(r)
            state.total = config.total(r)
            state.loading = false
            state.page = params.page
        })
    }

    config.init && fetch()
    return {
        ...toRefs(state),
        fetch,
    };
}

export function useBoeApi(_url, params = {}, config = {
    init: true,
    result: res => res.result,
}) {

    const state = reactive({
        data: [],
        loading: false,
    })
    watch(() => params, () => {
        fetch()
    })

    function fetch() {
        state.loading = true
        return request(_url, params).then(r => {
            state.data = config.result(r)
            state.loading = false
        })
    }

    config.init && fetch()
    return {
        ...toRefs(state),
        fetch,
    };
}

export function usePage(_url, params = {}, init = true) {

    const state = reactive({
        data: [],
        loading: false
    })

    watch(params, () => {
        fetch()
    })

    function fetch() {
        state.loading = true
        return request(_url, params).then(r => {
            console.log('fetch')
            console.log(r)
            state.data = r.result
            state.loading = false
        })
    }

    init && fetch()
    return {
        ...toRefs(state),
        fetch,
    };
}

export function useRequest(_url, params = {}, init = true) {

    const data = ref({})
    const loading = ref(false)

    watch(params, () => {
        fetchData()
    })

    function fetchData() {
        loading.value = true
        request(_url, params).then(r => {
            data.value = r
            loading.value = false
        })
    }

    init && fetchData()
    return {
        data,
        loading,
        fetchData,
    };
}

export async function request(_url, params) {
    const s = _url.split(' ')
    let url = s[0]
    const method = s[1] || 'get'
    if (method === 'get') {
        let paramsArray = [];
        //拼接参数
        if (params) {
            Object.keys(params).forEach(key => paramsArray.push(key + '=' + params[key]))
            if (url.search(/\?/) === -1) {
                url += '?' + paramsArray.join('&')
            } else {
                url += '&' + paramsArray.join('&')
            }
        }
    }
    const body = method !== 'get' ? params || {} : {}
    console.log('token', getCookie('token'))
    return axios({
        url,
        method,
        headers: {
            token: getCookie('token'),
            ...method !== 'get' ? {'Content-Type': 'application/json'} : {}
        },
        baseURL: '',
        ...method !== 'get' ? {data: JSON.stringify(body)} : {}
    }).then(resp => resp.data).then(response => {
        console.log(response)
        // if (response.status !== 200 && response.code !== 0) {
        //     if (response.code === 3 || response.code === 4 || response.code === 100) {
//                router.push({path: '/login'})
//                 return
//             } else {
//                response.showMsg &&  notification.open({
//                    message: response.showMsg,
//                    duration: 2,
//                });
//                 return
//             }
//         }
        return response
    }).catch(e => {
        console.log(2222)
        console.log(e)
        // router.push({path: '/login'})
    })
}