uniapp 封装 网络请求

首先创建utils 然后新建 request.js

/**
 * 封装请求对象
 */

const BASE_URL = "https://xxxxx/xxxx/xxxxx/xxxx/api";

/**
 * 
 */
function request({url, data, method}) {
    return new Promise((resolve, reject) => {
        //uni.app 发起网络请求
        uni.request({
            url: BASE_URL + url,
            data,
            method,
            sslVerify: true,
            success: ({
                data,
                statusCode,
                header
            }) => {
                if (data.success){
                    //请求成功
                    resolve(data)
                }else{
                    //请求失败 提示用户
                    uni.showToast({
                        title:data.message,
                        icon:"success",
                        mask:true,
                        duration:2000
                    }); 
                    //进行失败回调
                    reject(data.message);
                }
            },
            fail: (errot) => {
                //请求错误 直接进行错误回调
                    reject(errot);
            }
        })
    })
}

/*导出*/
export default request;
request.js

里面的 base-url 自己设置,还有就是里面封装了promise  uni.request 中的一些参数完全可以自定义,

里面存在些ES6 语法 慢慢看即可。

 

封装好了  使用封装:

1. 不规范就是直接用即可。。。。

 

我是很规范的好吗?  :::

新建文件夹 api  ,新建JS文件 然后里面写你指定的请求:

import request from '../utils/request';

/**
 * 热搜文章类型
 * 针对接口来写的啊  下面接口默认GET所以不写methods ,没有参数 所以不写 data :
 */

export function getHotTabs(){
    /**
     * 返回(Promise)
     */
    return request({
        url:'/test/test1'
    })
}

 

可以看到 所以这里返回了 我们就用  async  +  await 调用即可:

 

 

 

 

测试:

 

H 5 :

 

 

微信小程序: 

 

posted @ 2021-10-29 16:54  咸瑜  阅读(422)  评论(1编辑  收藏  举报