uniapp-----封装接口

系列文章目录

uniapp-----封装接口

uniapp-----分包

---

文章目录

系列文章目录

uniapp-----封装接口

uniapp-----分包

文章目录

前言

一、技术

二、封装步骤

1.准备

​编辑

2.代码填充

request.js：

api.js：

min.js

页面使用

总结

---

---

前言

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');//返回结果
            })

总结

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