uni-app 封装接口request请求

我们知道一个项目中对于前期架构的搭建工作对于后期的制作有多么重要，所以不管做什么项目我们拿到需求后一定要认真的分析一下，要和产品以及后台沟通好，其中尤为重要的一个环节莫过于封装接口请求了。因为前期封装好了，后面我们真的可以实现粘贴复制了。所以今天给大家分享一个在uni-app中如何封装一个request请求。

第一步、根目录下新建 config.js 文件

const config = {

base_url: '这里可以是生产环境或者测试环境'

}

export { config }

 

这里主要配置接口的基本路径

第二步、根目录下新建 utils/http.js 文件

import {

    config

} from '../config.js'

  

export const apiResquest = (prams) => { //prams 为我们需要调用的接口API的参数 下面会贴具体代码

  

    // 判断请求类型

    let headerData = {

        'content-type': 'application/json'

    }

  

    let dataObj = null

        //因为我们的GET和POST请求结构不同这里我们做处理，大家根据自己后台接口所需结构灵活做调整吧

    if (prams.method === "GET") {

        headerData = {

            'content-type': 'application/json',

            'token': uni.getStorageSync('token')

        }

    } else {

        dataObj = {

            'data': prams.query,

            'token': uni.getStorageSync('token')

        }

    }

    return new Promise((resolve, reject) => {

        let url = config.base_url + prams.url; //请求的网络地址和局地的api地址组合

        uni.showLoading({

            title: '加载中',

            mask: true

        })

        return uni.request({

            url: url,

            data: dataObj,

            method: prams.method,

            header: headerData,

            success: (res) => {

                uni.hideLoading()

                                //这里是成功的返回码，大家根据自己的实际情况调整

                if (res.data.code !== '00000') {

                    uni.showToast({

                        title: '获取数据失败:' + res.data.msg,

                        duration: 1000,

                        icon: "none"

                    })

                    return;

                }

                resolve(res.data);

                console.log(res.data)

            },

            fail: (err) => {

                reject(err);

                console.log(err)

                uni.hideLoading()

            },

            complete: () => {

                console.log('请求完成')

                uni.hideLoading()

            }

        });

    })

}

第三步、 创建model 层 根目录下新建 models/index.js 文件

——-⚠️注意： 这里可以根据自己的项目功能需求分解models 层——-

import { apiResquest } from '../utils/http.js'

  

//POST 请求案例

  

export const login = (query) => {

    return apiResquest({

        url: '这里是API的地址',

        method: 'POST',

        query: {...query}

    })

}

  

//GET 请求案例可以传递参数也可以不传递

export const validateCode  = (query) => {

    let str = query

    return apiResquest({

        url: `您的API地址 ?${str}`,

        method: 'GET'

    })

}

 

第四步、页面中调用

import { login } from '../../models/index.js'

//页面中的 methods 里面就可以直接调用了

Login(){

        //这里可以设置需要传递的参数

    let uid = uni.getStorageSync('userId')

    login(uid).then((res) => {

        console.log(res)

    }).catch(err => {

        console.log(err)

    })

}

 

以上代码就是完整的接口封装了，真的超级实用，其实网上有很多关于uni-app接口封装的案例，但是个人感觉亲测了好几种，这种是最好用的。分享在这里希望和大家一起交流。