uni-app/vue請求封裝

前言：

最近公司準備開發一個安卓的app，苦於原生開發的成本和無人會安卓技術，決定採用混合開發來實現。基於低學習成本，最終選擇了能較快上手的uni-app技術。這期間也是一邊看文檔，一邊開發，痛並快樂着。第一次嘗試寫博客，力求用最簡單的文字記錄一個項目的開發過程，但願本身能堅持下去！
其實在翻看uni-app的開發文檔，不難發現，他的不少語法和vue很是像，比方說數組遍歷、條件渲染等，只是將vue的【v】改爲了【uni】。同時其又參考了微信小程序開發的文檔，諸多語法也和小程序比較類似，比方說小程序的生命週期、路由跳轉以及傳值等。因此這篇文章是基於uni-app，可是放之vue和微信小程序都是能夠參考一番的。

1、測試環境、正式環境

uni-app 可經過 process.env.NODE_ENV 判斷當前環境是開發環境仍是生產環境，對此咱們能夠根據這一條件來動態切換鏈接測試服務器或生產服務器

if(process.env.NODE\_ENV === 'development'){
    console.log('開發環境') 
}else if (process.env.NODE\_ENV === 'production'){
    console.log('生產環境')
}

2、請求封裝

一、在項目中新建一個baseconfig.js文件，用於存放項目的接口地址，根據不一樣的環境分別添加測試接口域名和正式接口域名，而後將變量用export default命令模塊指定輸出：

var baseconfig = {};
 //測試地址
if (process.env.NODE_ENV === 'development') { 
    baseconfig = {
        server: 'http://test1/api/',
        pdcom: "http://test2/api/", 
    }
    
 //正式地址
} else if (process.env.NODE_ENV === 'production') {  /
    baseconfig = {
        server: 'http://formal/api/',
        pdcom: "http://formal/api/",
    }
}
export default baseconfig;

二、新建index.js將公共域名引用到文件之中

import baseconfig from "../baseconfig.js"

三、ajax封裝

//寫在index.js文件
const httpClient = {
request: function(method, url, data, contenType) {
    let p = {
        XToken: '',
        XUser: '',
        ContentType: 'application/json' //默認值
    };
    
    //獲取接口token本地存儲的token值---此字段視項目狀況而定
    var XToken = uni.getStorageSync('Token');
    if (XToken) {
        p.XToken = XToken;
    }
    
    //獲取接口User本地存儲的User值---此字段視項目狀況而定
    var XUser = uni.getStorageSync('User');    
    if (XUser) {
        p.XUser = XUser;
    }
    if (contenType) {
        p.ContentType = contenType;
    }
    
    //頭部信息封裝
    var herders = { 
        'X-Token': p.XToken,
        'X-User': p.XUser,
        'Content-Type': p.ContentType
    };
    
    return new Promise((resolve, reject) => {
        //添加一個提示框，能夠提高交互，也能防止數據未加載完用戶點擊致使報錯
        uni.showLoading({
            title:'加載中',
            mask:true
        });
        uni.request({
            url: url, //接口地址
            header: herders,
            data: data, // 傳入的參數
            method: method, // 請求方法
            success: function(res) {
                //關閉提示框
                uni.hideLoading();
                
                if(res.statusCode!==200){   //請求失敗顯示報錯信息
                    uni.showToast({
                        title: res.statusCode.toString(),
                        duration: 1000,
                        icon: "none"
                    })
                    return;
                }
                //請求token失效或者是錯誤，直接返回到登陸頁，讓用戶從新登錄
                if (!res.data.meta.success && res.data.meta.message == "Token校驗失敗異常:未登陸,或者token錯誤!null" ||res.data.meta.message =='Token校驗失敗異常:token '+'['+XToken+']' +' '+'is invalid' ) {
                    uni.showToast({
                        title:'登陸過時請從新登陸',
                        duration: 1000,
                        icon: "none"
                    })
                    setTimeout(function() {
                        uni.reLaunch({
                            url: "../../../pages/login/login/login"
                        })
                    }, 1500)
                }
                resolve(res.data) // 成功返回的結果
            },
            fail: function(err) {
                uni.hideLoading()
                reject(err) // 失敗結果
            }
        })
    });
},

// 經常使用請求方法封裝
Get: function(url, data, type) {
    let allurl = this.getUrl(type, url);
    return this.request('GET', allurl, data);
},
Post: function(url, data, type) {
    let allurl = this.getUrl(type, url);
    return this.request('POST', allurl, data);
},
Put: function(url, data, type) {
    let allurl = this.getUrl(type, url);
    return this.request('PUT', allurl, data);
},
Patch: function(url, data, type) {
    let allurl = this.getUrl(type, url);
    return this.request('PATCH', allurl, data);
},
Delete: function(url, data, type) {
    let allurl = this.getUrl(type, url);
    return this.request('DELETE', allurl, data);
},

// 頁面請求的時候會傳一個type，根據type值來調用不一樣域名的地址，下文有示例
getUrl: function(type, url) {
    let allurl = ""
    if (type == 1) {
        allurl = baseconfig.server
    } else if (type == 2) {
        allurl = baseconfig.pdcom
    } 
    return allurl + url
}
};
// 導出方法
module.exports = httpClient

四、新建一個comment.js文件，用於存放對外暴露文件,此方法還能夠優化，後期在處理

import httpClient from './index.js'     //comment.js文件
    export function get(url, params, type) {
        return httpClient.Get(url, params, type);
    }
    export function post(url, params, type) {
        return httpClient.Post(url, params, type);
    }
    export function put(url, params, type) {
        return httpClient.Put(url, params, type);
    }
    export function patch(url, params, type) {
        return httpClient.Patch(url, params, type);
    }
    export function del(url, params, type) {
        return httpClient.Delete(url, params, type);
    }

五、在unp-app 自帶main.js文件中將方法掛載到全局，變成公共方法。

import { get,post,put,patch,del } from '@/api/common.js' 
Vue.prototype.get = get
Vue.prototype.post = post
Vue.prototype.put = put
Vue.prototype.patch = patch
Vue.prototype.del = del

六、某一個頁面進行調用

methods: {   //在uni-app的methods中添加請求接口的方法
  getData() {
    var that = this;
    this.get("search/goods/editList", {   //須要請求的接口
      pageNum: 1,              // 參數
      pageSize: 10,                       // 參數
   }, 3).then(res => {                    //3表明type，反饋到請求封裝之中，根據不一樣的type調用不一樣的域名
       if (res.meta.success) {
           //請求成功操做
           } else {
            //請求失敗操做
        }
       })
  },
},