首页 > 技术文章 > uniApp常用请求封装之uni.request

daniel-Tengge 2021-01-17 01:29 原文

我个人比较喜欢模块化封装的思想,所以我把能用到的公共工具都尽量封装到utils文件夹下。

1.首先封装一个config.js文件

这个文件是用来存放一些配置文件,这里我是用来存放请求地址的域名,一般我们通过接口向后端发起请求时,前面会有一串相同的网址,这就是我们config.js文件要存放的东西。

比如config.js中:

export const  baseURL = "http://*****.cn"
 

2.接下来们会建立一个api文件夹,在里面存放我们需要的API接口

首先我们会建一个api.js文件,用来存放一些公共的部分,比如发起请求那部分,我们可以把常用的get,post,delete,put,等请求方式,通过调用一个公共的request方法,废话不多说,上代码:

import {
    baseURL
} from '../../utils/config.js'

// post请求
export const service = function( data, complete) {
    return new Promise((resolve, reject) => {
        uni.showLoading({
            title: "加载数据中,请稍后......"
        })
        uni.request({
            url: baseURL + "/api.html",
            data: data,
            header: {
                'Content-Type': 'application/json; charset=utf-8' //自定义请求头信息
            },
            success: (res) => {
                if (!res.data.status) {
                    uni.showToast({
                        title: res.data.msg
                    })
                }
                resolve(res.data)
            },
            fail: (err) => {
                uni.showToast({
                    title: "接口请求失败"
                })
                reject(err)
            },
            complete: () => {
                uni.hideLoading();
                if (complete) {
                    complete();
                }
            }
        });
    })
}
// post请求
export const post = (data, complete) => {
    return service('post', data, complete)
}
// get请求
export const get = ( data, complete) => {
    return service('get', data, complete)
}
 
简单的写了一下,这里只列举了post和get请求方式
 
 

推荐阅读