uni-app 接口封装 uView UI 框架

第一步 创建 config.js

// 此vm参数为页面的实例,可以通过它引用vuex中的变量
import {
    baseURL
} from './api.js';
module.exports = (vm) => {
    // 初始化请求配置
    uni.$u.http.setConfig((config) => {
        /* config 为默认全局配置*/
        config.baseURL = baseURL; /* 根域名 */
        return config
    })
    // 请求拦截
    uni.$u.http.interceptors.request.use((config) => { // 可使用async await 做异步操作
        uni.showLoading({
            title: '玩命加载中....',
            mask: true
        });
        const token = uni.getStorageSync('storage_key');
        // 登录接口 获取验证码 接口不需要token
        if (config.url.indexOf('/getNoticeByTime') != -1) {

        } else {
            config.header.Authorization = token.token;
        }
        return config;
    }, config => { // 可使用async await 做异步操作
        uni.showLoading({
            title: '玩命加载中....',
            mask: true
        });
        return Promise.reject(config)
    })
    // 响应拦截
    uni.$u.http.interceptors.response.use((response) => {
        // 关闭加载中
        uni.hideLoading()
        /* 对响应成功做点什么 可使用async await 做异步操作*/
        const data = response.data
        // 自定义参数
        const custom = response.config?.custom
        if (data.code !== 200) {
            // 如果没有显式定义custom的toast参数为false的话,默认对报错进行toast弹出提示
            if (data.code == 401) {
                // vm.$u.toast("操作异常");
                vm.$u.toast(data.msg);
                // 清楚缓存
                uni.clearStorageSync();
                // 返回初始页
                setTimeout(function(){uni.reLaunch({
                    url: '/pages/index/index'
                })},3000);
                
            } else {
                vm.$u.toast(data.msg);
            }
            return Promise.reject(data.msg)
            // // 如果需要catch返回,则进行reject
            // if (custom?.catch) {
            //     return Promise.reject(data)
            // } else {
            //     // 否则返回一个pending中的promise,请求不会进入catch中
            //     return new Promise(() => {})
            // }
        }
        return data.data || data.rows ? (data.data ? data.data : data.rows) : {}
    }, (response) => {
        vm.$u.toast("网络丢失");
        // 关闭加载中
        uni.hideLoading()
        return Promise.reject(response)
    })
}
 

第二步  api.js文件 

const http = uni.$u.http

const baseURL = ' ' //线上地址

const getNoticeByTime= (params, config = {}) => http.post('/register', params, config)
export {
  register
}

第三步 页面调用

    import {
        getNoticeByTime,
    } from '../../config/api.js';


            getNoticeByTime({}).then((res) => {
                this.noticeContent = res.noticeContent
            }).catch(() => {

            })

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值