前端快速简单封装接口

封装接口请求一直是前端一个必须要操作的步骤

此文以小程序封装uni.request为例，如果需要Vue项目中详细封装接口，可查看5.封装axios

1. 基础版 直接上代码

在项目utils目录下新建request.js文件，用于封装请求

// 此文以小程序封装uni.request为例 
        /*
        *封装请求接口
        * url： 请求路径
        * methods: 请求方式（get/post）
        * data: 请求参数
        * header: 请求头
        */
        // 后台基地址
        const BASE_URL ='https//xxx.xxx.xx'
        export default async function request ({url,method,data,header}) {
            // 请求之前加==》loading
            uni.showLoading({
                title: '数据请求中...'
            });
            //解构拿到数据
            let [error, res] = await uni.request({
                url: `${BASE_URL}${url}`, // es6拼接url地址
                method,
                data,
                header
            })
            if(!error) {
                // 处理返回数据 根据实际情况解构数据
                let { data: {message, meta} } = res
                // 关闭loading
                uni.hideLoading();
                // 返回需要得数据
                return {
                    msg: meta,
                    data:message
                }
            } else {
                return []
            }
        }

封装完了 怎么用？
上代码

// 其他页面用
        import request from '@/utils/request'
        async getUserInfo () {
            let {msg, data} = await request({
                url: 'xxx/xxx',
                data:{
                    a:'张三',
                    id:2
                }
            })
            // 判断 赋值操作
        };

2. (升级版) 封装到以上步骤 已经完成基本操作，

问题：但是每个页面要使用需要导入
解决：可以利用vue插件方法，继续回到utils下的ruquest文件封装中，添加如下代码

	   const MyRequest = {

            install(Vue) {
                Vue.prototype.request = request
            }
        }
        export {MyRequest}
        
        // 在main.js文件中 导入 注册
        import {MyRequest} from '@/utils/request'
        Vue.use(MyRequest)

怎么用

// 之后每个页面使用 就直接this  不用导出封装得js文件
        async getUserData () {
            let {msg, data} = await this.request({
                url: 'xxx/xxx',
                data:{
                    a:'张三',
                    id:2
                }
            })
            // 判断 赋值操作
        }