axios 封装统一调用

1.定义一个requset.js    名字有语义

/**
 * axios 封装
 */

import axios from 'axios'
import storage from './storage'
const TOKEN_INVALID = 'Token认真失败，请重新认证'
const NETWORK_ERROR = '网络异常，请稍后重试'

const service = axios.create({
    timeout: 8000
})


service.interceptors.request.use((req) => {
    const headers = req.headers
    const {token} = storage.getItem('userInfo')
    if (!headers.Authorization) headers.Authorization = 'Bearer '+token
    return req
})

service.interceptors.response.use((res) => {
    const {code, data, msg} = res.data
    if (code === 200) {
        return data
    } else if (code === 50001) {
        this.$message.error(TOKEN_INVALID)
        setTimeout(() => {
            this.$router.push('/login')
        }, 15000)
        return Promise.reject(TOKEN_INVALID)
    } else {
        this.$message.error(msg || NETWORK_ERROR)
        return Promise.reject(msg || NETWORK_ERROR)
    }
},err => {
    this.$message.error(msg || NETWORK_ERROR)
    return Promise.reject(msg || NETWORK_ERROR)
})


/**
 * 
 * @param {*} options 请求的配置
 * @returns 
 */
function request(options) {
    options.method = options.method || 'get'
    if (options.method.toLowerCase() === 'get') {
        options.params = options.data
    }
    return service(options)
}


export default request

2.定义api 管理  index.js  统一管理请求

/**
 * api  管理
 */
import request from '../utils/request'

export default {
    Login (params) {
       return request({
            url: '/api/users/login',
            method: 'post',
            data: params
        })
    },
    getUerList (params) {
        return request({
            url: '/test/users/list',
            method: 'get',
            data: params
        })
    },
    handleDel (params) {
        return request({
            url: '/test/users/delete',
            method: 'post',
            data: params
        })
    },
    getDeptIdList () {
        return request({
            url: '/test/dept/list',
            method: 'get',
            data: {}
        })
    },
    getRolesList () {
        return request({
            url: '/test/roles/allList',
            method: 'get',
            data: {}
        })
    },
    handleSubmit (params) {
        return request({
            url: '/test/users/operate',
            method: 'post',
            data: params
        })
    },
    heandlePatchDel (params) {
        return request({
            url: '/test/users/delete',
            method: 'post',
            data: params
        })
    },
    handleDel (params) {
        return request({
            url: '/test/users/delete',
            method: 'post',
            data: params
        })
    },
}

3. storage  封装   config.namesp  就是一个字符串

import config from '../config'
export default {
    setItem (key, value) {
        let storage = this.getStorage()
        storage[key] = value
        window.localStorage.setItem(config.namespace,JSON.stringify(storage))
    },
    getItem (key) {
        return this.getStorage()[key]
    },
    clearItem (key) {
        let storage = this.getStorage()
        delete storage[key]
        window.localStorage.setItem(config.namespace,JSON.stringify(storage))
    },
    clearAll () {
        window.localStorage.clear()
    },
    getStorage () {
        return JSON.parse(window.localStorage.getItem(config.namespace) || "{}")
    }
}

4.统一api 调用

<script>
export default {
    name: 'user',
    data () {
        return {
            showModel: false,
            user: {
                state: 0
            },
            pager: {
                pageNum: 1,
                pageSize: 10,
                total: 10
            },
            userList: [],
            checkUserIds: [], // 选择用户列表对象
            columns: [
                {
                label: '用户ID',
                prop: 'userId',
            },
            {
                label: '用户名称',
                prop: 'userName',
            },
            {
                label: '用户邮箱',
                prop: 'userEmail',
            },
            {
                label: '用户角色',
                prop: 'role',
                formatter (row, column, value) {
                    return {
                        0: '管理员',
                        1: '普通用户'
                    }[value]
                }
            },
            {
                label: '用户状态',
                prop: 'state',
                formatter (row, column, value) {
                    return {
                        1: '在职',
                        2: '离职',
                        3: '试用期'
                    }[value]
                }
            },
            {
                label: '注册时间',
                prop: 'createTime',
            },
            {
                label: '最后登录时间',
                prop: 'lastLoginTime',
            }
            ],
            userForm: {
                state: 3
            },
            rules: {
                userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                userEmail: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
                mobile: [
                        {
                            pattern: /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/,
                            message: '请输入正确格式的手机号', 
                            trigger: 'blur' 
                        }
                ]
            },
            roleList: [], //角色列表
            deptList: [], //部门列表
            action: 'add'
        }
    },
    mounted () {
        this.getUerList()
        this.getDeptIdList()
        this.getRolesList()
    },
    methods: {
        async getUerList () {
            let params = {}
            Object.assign(params,this.user,this.pager)
        //    this.$axios.get('/test/users/list', {
        //        params
        //    }).then(res => {
        //        this.userList = res.list
        //        this.pager.total = res.page.total
        //    })
        const res = await this.$api.getUerList(params)
        if (res) {
            this.userList = res.list
            this.pager.total = res.page.total
        }
        console.log(res);
        },
        handleReset(form) {
            this.$refs[form].resetFields()
        },
        heandleQuery () {
            this.getUerList()
        },
        handleCurrentChange (current) {
            this.pager.pageNum = current
            this.getUerList()
        },
        async handleDel (row) { // 用户单个删除
            // this.$axios.post('/test/users/delete', {
            //     data: {
            //         userIds: [row.userId]
            //     }
            // }).then(() => {
            //     this.$message.success('删除成功')
            //     this.getUerList()
            // })
            const res = await this.$api.handleDel({userIds: [row.userId]})
            if (res) {
                this.$message.success('删除成功')
                this.getUerList()
            }
        },
       async heandlePatchDel () {
            if (this.checkUserIds.length === 0) {
                this.$message.error('请选择要删除的用户')
                return
            }
            // this.$axios.post('/test/users/delete', {
            //     data: {
            //         userIds: this.checkUserIds
            //     }
            // }).then((res) => {
            //     if (res.nModified > 0) {                  
            //         this.$message.success('删除成功')
            //         this.getUerList()
            //     } else {
            //         this.$message.success('删除失败')
            //     }
            // })
            const res = await this.$api.heandlePatchDel({userIds: this.checkUserId})
            if (res) {
                if (res.nModified > 0) {
                    this.$message.success('删除成功')
                    this.getUerList()
                } else {
                    this.$message.success('删除失败')
                }
            }
        },
        handleSelectionChange (list) {
            let arr = []
            list.map(item => arr.push(item.userId))
            this.checkUserIds = arr
        },
        handleCreate () {
            this.showModel = true
        },
        async getDeptIdList () {
            // this.$axios.get('/test/dept/list').then((res) => {
            //     this.deptList = res
            // })
           const res = await this.$api.getDeptIdList()
           if (res) {
               this.deptList = res
           }
        },
        async getRolesList () {
            // this.$axios.get('/test/roles/allList').then((res) => {
            //     this.roleList = res
            // })
            const res = await this.$api.getRolesList()
            if (res) {
                this.roleList = res
            }
        },
        handleClose () {
            this.showModel = false
            this.handleReset('dialogForm')
        },
        handleSubmit () {
            this.$refs.dialogForm.validate(async valid => {
                if (valid) {
                    // toRow(userForm) 转换为普通数据
                    this.userForm.userEmail += '@163.com'
                    this.userForm.action = this.action
                    // this.$axios.post('/test/users/operate',{
                    //     ...this.userForm
                    // }).then(() => {
                    //     this.showModel = false
                    //     this.$message.success('用户创建成功')
                    //      this.handleReset('dialogForm')
                    //      this.getUerList()
                    // })
                    const res = await this.$api.handleSubmit(this.userForm)
                    if (res) {
                        this.showModel = false
                        this.$message.success('用户创建成功')
                        this.handleReset('dialogForm')
                        this.getUerList()
                    }
                }
            })
        }
    }
}
</script>

5.main.js  挂载全局

app.config.globalProperties.$storage = storage
app.config.globalProperties.$axios = axios
app.config.globalProperties.$api = api


app.use(router)
app.use(ElementPlus,{ size: 'small', zIndex: 3000 })
app.use(store)
app.mount('#app')

6.封装一次后就可以之家复制了，当然你不封装也是没有问题的就promise回调就可以了

7.附上代理

export default defineConfig({
  server: {
    host: 'localhost',
    port: 8080,
    proxy: {
      '/test': {
        target: 'https://www.fastmock.site/mock/5334559accb0157d04d2fa28428accc2/mocks',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/test/, '')
      },
      '/api': {
          target: 'http://localhost:3000',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
      }
      
    }
  },
  plugins: [vue()]
})