uniapp-----封装接口

系列文章目录


uniapp-----封装接口

uniapp-----分包



前言

uniapp的主包要求大小不得大于2MB,所以对于各处的重复代码应该封装起来,减少多余代码


一、技术

uniapp、globalData、vue

二、封装步骤

1.准备

新建一个文件夹,内有:request.js、api.js两个文件

 

2.代码填充

request.js:
const Url = '域名';
export default (method, i, data) => {//接收的参数  method:请求方式、i:接口路径、data:参数
    return new Promise((resolve, reject) => {//实列化promise即异步方法,方便使用resolve, reject
        console.log(i, method, data);//打印接收参数是否有误
        uni.request({//uniap请求
            method: method,
            url: Url + i,//拼接路径
            data: data,

        }).then((res) => {
            resolve(res.data)//抛出成功信息
        }).catch((res) => {
            console.log('请求失败', res);//失败打印返回数据
        })
    })
};

api.js:

import request from "./request.js"//引用request文件
export default {//默认导出
    tokenTimeOut(params) {//接口名称
        return request('POST', '/api/Begin/index', params)//抛出参数
    },
}

min.js

import api from "api/api.js" //接口api
Vue.prototype.$api = api

页面使用

let params = 1;//参数

this.$api.tokenTimeOut(params).then(res => {//调用封装的api
                console.log(res,'1234');//返回结果
            })

总结

封装接口对于项目来说非常的有必要,就算后期修改域名也只需要修改一处就可以了,并且可以减少代码的复用性,性价比还是比较高的