uni-app请求uni.request封装使用

时间:2021-01-29 虚乄人气:0

对uni.request的一些共同参数进行简单的封装，减少重复性数据请求代码。方便全局调用。

先在目录下创建 utils 和 common 这2个文件夹

utils 是存放工具类的，common 用来放置常用方法的

之后在utils 中创建 requset.js 用来放置 uni.request 的请求方法，在对其进行简单的封装。

requset.js 代码

import operate from '../common/operate.js'
// vuex 的使用  详情参考官网 https://uniapp.dcloud.io/vue-vuex
import store from '../store/index.js'  

export default class Request {
    http(param) {
        // 请求参数
        var url = param.url,
            method = param.method,
            header = {},
            data = param.data || {},
            token = param.token || "",
            hideLoading = param.hideLoading || false;

        //拼接完整请求地址
        var requestUrl = operate.api + url;

        //请求方式:GET或POST(POST需配置
        // header: {'content-type' : "application/x-www-form-urlencoded"},)
        if (method) {
            method = method.toUpperCase(); //小写改为大写
            if (method == "POST") {
                header = {
                    'content-type': "application/x-www-form-urlencoded"
                };
            } else {
                header = {
                    'content-type': "application/json"
                };
            }
        }

        //加载圈
        if (!hideLoading) {
            uni.showLoading({
                title: '加载中...'
            });
        }

        // 返回promise
        return new Promise((resolve, reject) => {
            // 请求
            uni.request({
                url: requestUrl,
                data: data,
                method: method,
                header: header,
                success: (res) => {
                    // 判断 请求api 格式是否正确
                    if (res.statusCode && res.statusCode != 200) {
                        uni.showToast({
                            title: "api错误" + res.errMsg,
                            icon: 'none'
                        });
                        return;
                    }
                    // code判断:200成功,不等于200错误
                    if (res.data.code) {
                        if (res.data.code != '200') {
                            uni.showToast({
                                title: "" + res.data.msg,
                                icon: 'none'
                            });
                            return;
                        }
                    } else {
                        uni.showToast({
                            title: "code!=200" + res.data.msg,
                            icon: 'none'
                        });
                        return;
                    }
                    // 将结果抛出
                    resolve(res.data)
                },
                //请求失败
                fail: (e) => {
                    uni.showToast({
                        title: "" + e.data.msg,
                        icon: 'none'
                    });
                    resolve(e.data);
                },
                //请求完成
                complete() {
                    //隐藏加载
                    if (!hideLoading) {
                        uni.hideLoading();
                    }
                    resolve();
                    return;
                }
            })
        })
    }
}

在common 中分别创建 operate.js 和 api.js

operate.js 用来放置请求接口 api 地址

export default {
    //接口
    api: "http://192.168.208.126:8080",
}

api.js 是用来调用我们封装好的 uni.request ,并且统一管理请求接口，在后续开发中只需要在页面中调用 api.js中请求即可

import Request from '@/utils/requset.js'
let request = new Request().http

//全局定义请求头
export default {
    // 请求样式
    classifyLeft: function(data) {
        return request({
            url: "/category/list", //请求头
            method: "GET", //请求方式
            data: data, //请求数据
        })
    },
}
/*
请求样式：
    自定义名字: function(data) {
        return request({
            url: "/banner", //请求头
            method: "GET", //请求方式 
            data: data,    //请求数据
            token: token, // 可传  
            hideLoading: false, //加载样式
        })
    },
*/

api.js的调用可以在main.js 中进行全局调用，也可以在需要的页面中调用，可根据实际情况来决定是否全局调用。下面只介绍全局调用

在mian.js中导入api.js

1. 在main.js 中引入api.js
        import api from '@/common/api.js'
        Vue.prototype.$api = api
2. 在页面中调用
        //不传参数
        this.$api.sendRequest().then((res) => {
            console.log(res);
        })
        //传参
        this.$api.sendRequest({参数}).then((res) => {
            console.log(res);
        })

项目地址：https://gitee.com/jielov/music-netease-api.git

加载全部内容