微信小程序request封装,小程序封装接口请求

request封装可以方便我们统一管理请求函数,减少冗余代码。

const baseUrl = "xxx"; //请求根

const http = ({
    url = "",
    param = {},
    type = 'from',
    ...other
} = {}) => {
    wx.showLoading({ //可以不加
        title: '请求中...'
    })
    let timeStart = Date.now();
    return new Promise((resolve, reject) => {
        wx.request({
            url: baseUrl + url,
            data: param,
            header: { //两种  ,一种json 一种 from
                'content-type': type == 'from' ? 'application/x-www-form-urlencoded' : 'application/json'
            },
            ...other,
            complete: res => {
                wx.hideLoading(); //同上 ,可以不加
                console.log(`耗时${Date.now() - timeStart}`);
                if (res.statusCode >= 200 && res.statusCode < 300) {
                    resolve(res.data);
                    ... //此处根据自己的业务需求自行定义
                } else {
                    reject(res)
                }
            }
        })
    })
}

使用实例

// 1.无需传参数请求(默认get请求,header为from)
const a = () => {
    return http({
        url: 'xxx',
    })
}

// 2.带参数请求并且为post
const b = param => {
    return http({
        url: 'xxx',
        method: 'post'
    })
}

// 3.带参数请求post,header为json
const c = param => {
    return http({
        url: 'xxx',
        type: 'json',
        method: 'post'
    })
}

module.exports = {
    a,
    b,
    c,
}

页面中使用

const api = require(xxxx); //找到我们封装的api

requestA() {
        api.a().then(res=> {
            console.log(res);
        }) .catch(err =>{
            console.log(err);
        }) 
},
requestB() {
    let data = {}
    api.b(data).then(res => {}).catch(err=>{}) 
}

//如果页面有多个请求同时进行,可以这样写
Promise.all([
  api.a,
  api.b,
]).then(res =>{}).catch(err=>{})

你可能感兴趣的:(微信小程序request封装,小程序封装接口请求)