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,
                            "\n 提交方式：", method,
                            "\n 提交地址：", apiUrl,
                            "\n 提交data：", data,
                            "\n 請求返回", apiRes.data);
                        break;
                    default:
                        console.error(
                            "%c 備注：", 'color:orange;font-size:15px', apiName,
                            "\n 提交方式：", method,
                            "\n 提交地址：", apiUrl,
                            "\n 提交data：", data,
                            "\n 請求返回", apiRes.data);
                        break;
                }
                resolve(apiRes.data);//成功返回，resolve是Promise的回調方式
            },
            fail(apiRes) {//失敗
                console.error(
                    "%c 備注：", 'color:red;font-size:15px',apiName,
                    "\n 提交方式：", method,
                    "\n 提交地址：",  apiUrl,
                    "\n 提交data：",  data,
                    "\n 請求返回", 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"
    });
});