Uniapp如何封装网络请求方法demo

 更新时间:2023年10月20日 11:58:35   作者:小拼拼  
这篇文章主要为大家介绍了Uniapp如何封装网络请求方法demo,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

引言

写文章的故事:给整宕机了

第一步:定义请求文件

request.js

import encrypt from '@/util/encrypt'
import {
    settings
} from '@/settings.js'
const BASE_URL = settings.BASE_URL
const encryptKey = settings.ENCRYPT_KEY
const whiteList = settings.WHITE_LIST
export const request = (options) => {
    const token = uni.getStorageSync('shopToken')
    const head = {
        'Authorization': '',
        'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
    }
    if (!options.header || !options.header['Content-Type']) {
        options.header = head
    }
    if (whiteList.indexOf(options.url) === -1) {
        if (!token) {
            uni.showToast({
                icon: "none",
                title: "请先登录"
            })
            uni.removeStorageSync("shopToken")
            return Promise.reject("请先登录")
        } else {
            options.header.Authorization = token
        }
    }
    if (options.data) {
        options.data['sign'] = encrypt.encryptMd5(options.data, encryptKey)
    }
    return new Promise((resolve, reject) => {
        uni.request({
            url: BASE_URL + options.url,
            method: options.method || 'GET',
            data: options.data || {},
            header: {
                'Authorization': options.header.Authorization,
                'Content-Type': options.header['Content-Type']
            },
            success: (res) => {
                if (res.data.code !== 200) {
                    if (res.data.code === 1000 || res.datacode === 1001 || res.datacode ===
                        1002 || res.data.code === 1010 || res.data.code === 500) { 
                        uni.showModal({
                            title: '提示',
                            content: '长时间未操作请重新登录',
                            showCancel: false,
                            success: function(d) {
                                uni.removeStorageSync('shopToken')
                                uni.navigateTo({
                                   url: '/pages/login/register',
                                })
                            }
                        });
                    } else if (res.data.msg != 'token不匹配') {
                    } else if (res.data.msg == 'token不匹配') {
                        res.data.msg = "登录状态过期请重新登录"
                    }
                    uni.showToast({ icon: "none", title: res.data.msg })
                    reject(res.data.msg)
                } else {
                    resolve(res.data)
                }
            },
            fail(err) {
                reject(err)
            }
        })
    })
}

第二步:访问接口

settings.js

export const settings = { 
    // #ifdef MP-WEIXIN
    BASE_URL: 'http://192.168.101.35', // 访问接口 
    // #endif
    // #ifdef H5
    BASE_URL: '', // 访问接口 
    // #endif
    // BASE_URL: 'https://api.helicong.com:80', // 访问接口
    ENCRYPT_KEY: 'jdp*#(@KFJ322!@#$jkl(#jdlmkdhc', // 前端加密key
    WHITE_LIST: ["/api/lifeMerchant/baseInfo/selectSortByDistance", "/api/middle/sendSms", "/api/lifeMerchant/account/merchantRegisterLogin"] , // 接口过滤白名单 ,'/alipay/credit','/alipay/pay',"/alipay/tradeRefund","/alipay/unFreeze"
}

以上就是Uniapp如何封装网络请求方法demo的详细内容,更多关于Uniapp封装网络请求的资料请关注脚本之家其它相关文章!

相关文章

  • 浅谈JavaScript 数据属性和访问器属性

    浅谈JavaScript 数据属性和访问器属性

    下面小编就为大家带来一篇浅谈JavaScript 数据属性和访问器属性。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • Javascript 引擎工作机制详解

    Javascript 引擎工作机制详解

    我们需要引入几个相关的概念:执行环境栈、全局对象、执行环境、变量对象、活动对象、作用域和作用域链等,这些概念正是JS引擎工作的核心组件。这篇文章的目的不是孤立的为你讲解每一个概念需要的朋友可以参考下
    2016-11-11
  • 深入理解JS中的substr和substring

    深入理解JS中的substr和substring

    下面小编就为大家带来一篇深入理解JS中的substr和substring。小编觉得挺不错的,现在分享给大家,也给大家做个参考
    2016-04-04
  • 小程序中英文混合排序问题解决

    小程序中英文混合排序问题解决

    这篇文章主要介绍了小程序中英文混合排序问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • 原生js的弹出层且其内的窗口居中

    原生js的弹出层且其内的窗口居中

    弹出层内含窗口且居中,在本例使用原生js来实现,与网上的有所不一样,大家不妨参考下
    2014-05-05
  • JavaScript中的console.profile()函数详细介绍

    JavaScript中的console.profile()函数详细介绍

    这篇文章主要介绍了JavaScript中的console.profile()函数详细介绍,本文讲解了console.profile()函数的浏览器支持情况、console.profile()的使用、Firebug中Profile按钮的使用等内容,需要的朋友可以参考下
    2014-12-12
  • javascript代码调试之console.log 用法图文详解

    javascript代码调试之console.log 用法图文详解

    对于开始学js的朋友可能不知道为什么用console.log,页面中也看不到信息,对于这个console.log脚本之家小编特整理与介绍一下,方便需要的朋友
    2016-09-09
  • 纯js实现无缝滚动功能代码实例

    纯js实现无缝滚动功能代码实例

    这篇文章主要介绍了纯js实现无缝滚动功能代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02
  • 小程序hover-class点击态效果实现

    小程序hover-class点击态效果实现

    这篇文章主要介绍了小程序hover-class点击态效果实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • bootstrap table实现合并单元格效果

    bootstrap table实现合并单元格效果

    这篇文章主要为大家详细介绍了bootstrap table实现合并单元格效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12

最新评论