uni-app数据申请封装和api接口治理

1.开发环境 uni-app
2.电脑系统 windows10专业版
3.在应用uni-app开发的过程中,咱们常常会应用到数据申请,上面我我对uni-app数据申请的封装和接口治理,心愿对你有所帮忙!
4.在pages同级新建一个目录,http(名字本人定义),在http目录下新建一个http.js文件,增加代码如下:

function req(obj) {    return new Promise((resolve, reject) => {        // const HOST = baseUrl;        var method = obj.method || "GET";        // var url = HOST + obj.url || "";        var url =  obj.url || "";        var data = obj.data || {};        var header = obj.header || obj.method == ('post' || 'POST') ? {            'Content-Type': obj.contentType || 'application/x-www-form-urlencoded',        } : {            'Content-Type': obj.contentType || 'application/json',        };        var success = obj.success; // 胜利回调函数        var fail = obj.fail; //示意失败后，要执行的回调函数        uni.request({            url: url,            data: data,            method: method,            header: header,            success: ((res) => {                if (res.statusCode === 203) {                    console.log('返回203状态码')                    // 错误处理，返回登录页                    // uni.reLaunch({url:'/pages/login/index'})                } else if (res.statusCode === 200) {                    resolve(res)                }            }),            fail: ((err) => {                reject(err)            })        })    })}export default req

5.在http目录同级,新增一个api目录,在api目录上面新建一个api.js,增加如下代码:

import req from '../http/http.js' //导入 封装的申请let api = {};//申请数据api.getfeng = data => {  //getfeng 示意办法名,data示意参数    return req({        url: '/api/feng', //申请接口        method: 'post',  //申请办法        data: data      //传参    })};export default api  //导出

6.在vue模板中增加如下代码:

import api from '../../api/api.js'  //导入接口

7.在methods中增加如下代码:

chengeth5(){api.getfeng({name:'陈',age:'100'}).then((res)=>{                    console.log(res);  //输入数据                })            },

7-1.在mounted中增加如下代码:

this.chenget();

8.我的项目构造如下:

9.在浏览器中成果为:

10.本期的分享到了这里就完结啦,是不是很nice,心愿对你有所帮忙,让咱们一起致力走向巅峰!