uni-app数据请求封装和api接口管理

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.项目结构如下:

10.本期的分享到了这里就结束啦,是不是很nice,希望对你有所帮助,让我们一起努力走向巅峰!