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"
});
});

  

原文地址:https://www.cnblogs.com/caitangbutian/p/12937289.html