在項目的開發(fā)中，我們會有很多的接口，而接口的封裝，也是我們經(jīng)常遇到的，今天就將uni-app中對于接口封裝的方法來與大家一起分享，有不足的地方，希望提出您的建議！

在項目中登錄成功后，后端給了一個token,每次請求不同接口時都要驗證這個token，而且不同頁面又會有很多請求的接口，如果每次都去獲取存儲的token，再發(fā)送請求代碼量比較多，而且頁面不美觀，進(jìn)行封裝在api文件中。

針對開發(fā)環(huán)境和生產(chǎn)環(huán)境，將域名進(jìn)行封裝，自動識別更改。

config.js文件中使用process.env.NODE_ENV可以自動編譯出當(dāng)前環(huán)境。

let url_path={};
// 開發(fā)環(huán)境
if(process.env.NODE_ENV === 'development'){
    url_path = {
        'base_url': 'http://79.97.771.177:8881'
    }
}
// 生產(chǎn)環(huán)境
if(process.env.NODE_ENV === 'production'){
    url_path = {
        'base_url': 'http://79.97.771.177:8881'
    }
}
export default url_path

DBD41911BB724C49AFD9B23C5C341728.jpg

request.js 主要寫默認(rèn)GET請求和POST請求的方法

import url_path from '../common/config.js';
function base_request (url, data, method = 'GET', header = {})  {
    data = Object.assign({}, {
        'tokenClientKey': JSON.parse(uni.getStorageSync('user_info')).tokens
    }, data)
    return uni.request({
        method,
        data,
        url: url_path['base_url'] + url, 
        header
    })
}

function postReq(url, data) {
    return base_request(url, data, 'POST', {});
}

function getReq(url, data) {
    return base_request(url, data);
}

export default {
    postReq,
    getReq
}

user/index.js 存放初始化頁面使用的接口

import BASE from '../request.js';

export default {
    login(data) { // 初始缺陷列表
        return BASE.getReq('/ccbcase/m?xwl=api/sys/icdp/bug/crud/select', data)
    },
 }

bugDispose/index.js 存放在修改頁面不同接口

import BASE from '../request.js';

export default {
    bug_status(data) {  // 處理缺陷
        return BASE.getReq('/ccbcase/m?xwl=api/sys/icdp/bug/keybuffer/bg_status', data)
    },
    distributeList(data) { // 分配人員
        return BASE.getReq('/Wb7/m?xwl=CcbCaseMobile/guishuren', data)
    },
    firstDir(data) { // 一級目錄
        return BASE.getReq('/Wb7/m?xwl=CcbCaseMobile/yijimulu', data)
    },
    secondDir(data) { // 二級目錄
        return BASE.getReq('/Wb7/m?xwl=CcbCaseMobile/erjimulu', data)
    }
}

index.js 將各種分類的接口集中拋出

import User from './user/index.js';
import BugDipose from './bugDispose/index.js' 

export default {
    User,
    BugDipose
}

頁面調(diào)用時

import API from '../../api/index.js'
    console.log(API, 'API')

 // 處理缺陷
API.BugDipose.bug_status({})  // 如果需要傳參，在{}中進(jìn)行填寫
.then(data => {
    uni.hideLoading();
    var [error, res] = data;
    if(res.data.respCode == 200){
        this.statusArr = [];
        // this.firstDir.concat(res.data.bugStatus[this.details.BG_STATUS]);
        if(res.data.bugStatus[this.details.BG_STATUS] == undefined) {
            this.statusArr.push('已解決');
        } else {
            this.statusArr.push(...res.data.bugStatus[this.details.BG_STATUS]);
            this.statusIndex = res.data.bugStatus[this.details.BG_STATUS].indexOf(this.details.BG_STATUS);
        }
        // console.log(this.statusArr, 'get3 缺陷狀態(tài)');
    }
}),