zoukankan      html  css  js  c++  java
  • uni封装request请求

    1、封装Api 列表 (文件名:apiUrlList.js)

    var apiUrlList = {
        service: "https://www.cnblogs.com/", //服务器
        picUrl:'/static/images/',//图片地址
        "loginAPI": { url: "/client/auth/login",method: "POST",name:"用户登录"},
    };
    
    export default apiUrlList

    2、封装请求(文件名:ajax.js )

    /**=====================================================================核心:接口文件====*/
    import apiUrlList from "./apiUrlList.js" //引入接口文件
    /**=====================================================================核心:网络请求====*/
    /**
     * 功能:myAjax('API接口',{提交的数据},'重定义提示文本',{控制加载提示})
     * 数据类型:myAjax('字符串|必填',{对象|选填},'字符串|选填',{对象|选填})
     * 实例:myAjax('/api/login/index',{token:000000},'登录',{show:true,mask:true,title:'登录中…'})
     */
     function myAjax(api,data,apiName,showLoading){
    
        var mask=true;
        var title='加载中';
        var show=true;
    
        if(showLoading){
            show=showLoading.show;//false:不显示
            mask=showLoading.mask;//false:可点击
            title=showLoading.title;//标题
        }
    
        if(show){
            uni.showLoading({
                title:title,
                mask:mask
            });
        }
    
        let that = this;
        var apiUrl = apiUrlList.service + apiUrlList[api].url;
        var method = apiUrlList[api].method;
        if(!apiName){apiName=apiUrlList[api].name}else{apiName=apiUrlList[api].name+"===============>"+apiName}
        return new Promise(function (resolve, reject) {
            // console.clear();
            data.token=uni.getStorageSync('landingInfo').token;
    
            uni.request({
                url:apiUrl, //仅为示例,并非真实接口地址。
                data:  data,
                method:method,
                header: {
                    // 'content-type': 'application/json' // 默认值
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                success: (apiRes) => {//成功
                    switch (apiRes.data.code) {
                        case 0:
                            console.warn(
                                "%c 备注:", 'color:orange;font-size:15px', apiName,
                                "
     提交方式:", method,
                                "
     提交地址:", apiUrl,
                                "
     提交data:", data,
                                "
     请求返回", apiRes.data);
                            break;
                        default:
                            console.error(
                                "%c 备注:", 'color:orange;font-size:15px', apiName,
                                "
     提交方式:", method,
                                "
     提交地址:", apiUrl,
                                "
     提交data:", data,
                                "
     请求返回", apiRes.data);
                            break;
                    }
                    resolve(apiRes.data);//成功返回,resolve是Promise的回调方式
                },
                fail(apiRes) {//失败
                    console.error(
                        "%c 备注:", 'color:red;font-size:15px',apiName,
                        "
     提交方式:", method,
                        "
     提交地址:",  apiUrl,
                        "
     提交data:",  data,
                        "
     请求返回", apiRes);
    
                    uni.showModal({
                        title: '提示',
                        content: 'API请求:'+apiName+' 失败',
                        confirmText:"结束",//确定按钮的文字
                        cancelText:"继续",//取消按钮的文字
                        showCancel:true,//是否显示取消按钮
                        success: function (showModalRes) {
                            if (showModalRes.confirm) {
    
                            } else if (showModalRes.cancel) {
                                apiRes.apiName=apiName;
                                reject(apiRes);//失败返回,resolve是Promise的回调方式
                            }
                        }
                    });
                    uni.hideLoading();
                },
                complete(res){//结束
                    if (res.data.code == 401) {
                        that.$gotoPage('/', 1);
                        return false
                    }
                    uni.hideLoading();
                }
            });
        })
    }
    
    /**=====================================================================核心:开放入口函数====*/
    // module.exports = {
    //     myAjax: myAjax
    // };
    
    export  {//
        myAjax,
        apiUrlList
    }
    封装网络请求

    3、使用vue链 成为全局调用

    import {myAjax,apiUrlList} from 'appConfig/ajax.js';  //引入
    
    Vue.prototype.$http =myAjax ;      //申明
    
    Vue.prototype.$apiUrlList =apiUrlList ; //申明

    4、在需要请求的位置

    let that=this;
    var data={};
    this.$http("loginAPI", data).then((res) => {
    if(res.code=='0'){

    }else{
    uni.showToast({
    title: res.msg,
    icon: "none"
    });
    }
    }).catch((res) => {
    console.error(res);
    uni.showToast({
    title: '数据出错:'+(res.apiName||""),
    icon: "none"
    });
    });

      

  • 相关阅读:
    【转载】基于TINY4412的Andorid开发-------简单的LED灯控制
    【Android 多媒体应用】使用MediaCodec将摄像头采集的视频编码为h264
    【Android 多媒体应用】使用MediaCodec解码使用SurfaceView显示视频
    【Android 多媒体应用】使用MediaCodec解码使用AudioTrack播放音频数据
    【Android 多媒体应用】使用 TTS
    【Android 多媒体应用】使用 VideoView 播放视频
    【Android 多媒体应用】使用 MediaPlayer 播放视频
    【Android 多媒体应用】使用MediaRecoder录制,MediaPlayer播放音频数据
    Android Binder 系统学习笔记(一)Binder系统的基本使用方法
    【转】Android下面打印进程函数调用堆栈(dump backtrace)的方法
  • 原文地址:https://www.cnblogs.com/caitangbutian/p/12937289.html
Copyright © 2011-2022 走看看