编程大白话之-uni-app中请求接口的封装

在项目的开发中，我们会有很多的接口，而接口的封装，也是我们经常遇到的，今天就将uni-app中对于接口封装的方法来与大家一起分享，有不足的地方，希望提出您的建议！

在项目中登录成功后，后端给了一个token,每次请求不同接口时都要验证这个token，而且不同页面又会有很多请求的接口，如果每次都去获取存储的token，再发送请求代码量比较多，而且页面不美观，进行封装在api文件中。

针对开发环境和生产环境，将域名进行封装，自动识别更改。

config.js文件中使用process.env.NODE_ENV可以自动编译出当前环境。

let url_path={};
// 开发环境
if(process.env.NODE_ENV === 'development'){
    url_path = {
        'base_url': 'http://79.97.771.177:8881'
    }
}
// 生产环境
if(process.env.NODE_ENV === 'production'){
    url_path = {
        'base_url': 'http://79.97.771.177:8881'
    }
}
export default url_path

DBD41911BB724C49AFD9B23C5C341728.jpg

request.js 主要写默认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
}

页面调用时

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

 // 处理缺陷
API.BugDipose.bug_status({})  // 如果需要传参，在{}中进行填写
.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 缺陷状态');
    }
}),