有没有好用的uniapp请求库

有没有好用的uniapp请求库?要有完整的认证、拦截、重试机制

让PHP再次伟大
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
最佳答案

luch-request uniapp插件
如何使用下载示例项目照着写就行了,关于重试机制没用过,不知道有没有. 文档可到官网 www.quanzhan.co/luch-request/guide...

以下是几个示例场景:

  1. 大部分请求不需要每次携带 access_token 从而减少 storage 的读取影响速度,又比如我要区分运行在哪个平台
var platform = '';
// #ifdef MP-BAIDU
platform = 'MP-BAIDU';
// #endif
// #ifdef MP-WEIXIN
platform = 'MP-WEIXIN';
// #endif

test.setConfig((config) => { /* 设置全局配置 */
    config.header = {
         ...config.header,
        platform:platform
    }
    config.custom = {
         auth: false, // 是否传token
    }
    return  config
})

在需要权限认证时

this.$http.get('/v1/..', {custom:{auth:true}}).then(..
  1. 拦截器,比如请求前携带 token,配合 vuex store
    http.interceptors.request.use((config) => {
     if (config.custom.auth) {
         config.header.Authorization = store.state.vuex_token;
      }
    return  config
    }, (config) => {
    return  Promise.reject(config)
    })
    还比如响应拦截器中还可以用 http 再发一个请求覆盖之前的请求,比如 响应返回 access_token 过期的响应码 4011,并且后端返回了新的 token,那么可以拿新的 token 再次请求
    http.interceptors.response.use(async (response) => { /* 请求之后拦截器。可以使用async await 做异步操作  */
    if(response.data.data.code ==  4011){
     uni.$u.vuex('vuex_token', response.data.data.access_token);//保存新的token
     //再次发送请求
      let  repeatRes  =  await http.request(response.config);
      if ( repeatRes ) {
          response  =  repeatRes;
     }
    }
     return  response
1周前 评论
勇敢的心 (楼主) 1周前
讨论数量: 7
翟宇鑫

fetch

1周前 评论

axios-vue ?

1周前 评论

自己写:


import appends from "./appends.js"
import message from "../features/message.js"
import env from "../env.js"

export default {
    config: {
        baseUrl: env.baseUrl,
        header: {
            'Content-Type':'Application/json;charset=UTF-8'
        },  
        data: {},
        method: "GET",
        dataType: "json",  /* 如设为json,会对返回的数据做一次 JSON.parse */
        responseType: "text",
        success() {},
        fail(err) {
            if (err.errMsg.indexOf('request:fail abort statusCode:-1') > -1 ) {
                message.showModal('',{content:'连接超时,请检查您的网络。',showCancel:false})
                reject('连接超时,请检查您的网络。')
            }
        },
        complete() {}
    },
    interceptor: {
        globalRequest(config){
            return appends.interceptorRequest(config)
        },
        globalResponse(response){
            return appends.interceptorResponse(response)
        },
        request: null,
        response: null
    },
    request(options) {
        if (!options) {
            options = {}
        }
        options.baseUrl = options.baseUrl || this.config.baseUrl
        options.dataType = options.dataType || this.config.dataType
        options.url = options.baseUrl + options.url
        options.method = options.method || this.config.method
        options.data = options.data || {}
        options.data = options.method === 'GET' ? options.data : JSON.stringify(options.data)
        let hideLoading = options.hideLoading || false
        //TODO 加密数据

        //TODO 数据签名

        return new Promise((resolve, reject) => {
            let _config = null

            options.complete = (response) => {
                response.config = _config

                if (hideLoading === false) {
                    uni.hideLoading()
                }

                if (this.interceptor.globalResponse) {
                    let result = this.interceptor.globalResponse(response)
                    if (typeof result === 'object') {
                        response = result
                    } else if (result === false) {
                        return reject(false)
                    }
                }
                if (this.interceptor.response) {
                    let result = this.interceptor.response(response)
                    if (typeof result === 'object') {
                        response = result
                    }
                } 

                if (response.statusCode >= 200 && response.statusCode < 300) { //成功
                    resolve(response);
                } else if (response.statusCode === 422) {
                    let messages = response.data.message+"\r\n"
                    if (response.data.errors) {
                        for (let key in response.data.errors) {
                            messages += response.data.errors[key]+"\r\n"
                        }
                    }

                    message.showModal('', {
                        showCancel : false,
                        content : messages
                    })
                    reject(response)
                } else if (response.statusCode >= 500){
                    message.showModal('未知错误,请联系管理员处理', {
                        showCancel : false
                    })
                    reject(response)
                } else {
                    reject(response)
                }
            }

            _config = Object.assign({}, this.config, options)
            _config.requestId = new Date().getTime()

            if (this.interceptor.globalRequest && this.interceptor.globalRequest(_config) === false) {
                return reject(false)
            }

            if (this.interceptor.request) {
                this.interceptor.request(_config)
            }

            if (hideLoading === false) {
                uni.showLoading({
                    mask : true
                })
            }

            uni.request(_config);
        });
    },
    get(url, data, options) {
        if (!options) {
            options = {}
        }
        options.url = url
        options.data = data
        options.method = 'GET'  
        return this.request(options)
    },
    post(url, data, options) {
        if (!options) {
            options = {}
        }
        options.url = url
        options.data = data
        options.method = 'POST'
        return this.request(options)
    },
    put(url, data, options) {
        if (!options) {
            options = {}
        }
        options.url = url
        options.data = data
        options.method = 'PUT'
        return this.request(options)
    },
    delete(url, data, options) {
        if (!options) {
            options = {}
        }
        options.url = url
        options.data = data
        options.method = 'DELETE'
        return this.request(options)
    }
}


/**
 * 请求接口日志记录
 */
function _reqlog(req) {
    if (process.env.NODE_ENV === 'development') {
        console.log("【" + req.requestId + "】 地址:" + req.url)
        if (req.data) {
            console.log("【" + req.requestId + "】 请求参数:" + JSON.stringify(req.data))
        }
    }
    //TODO 调接口异步写入日志数据库
}

/**
 * 响应接口日志记录
 */
function _reslog(res) {
    let _statusCode = res.statusCode;
    if (process.env.NODE_ENV === 'development') {
        console.log("【" + res.config.requestId + "】 地址:" + res.config.url)
        if (res.config.data) {
            console.log("【" + res.config.requestId + "】 请求参数:" + JSON.stringify(res.config.data))
        }
        console.log("【" + res.config.requestId + "】 响应结果:" + JSON.stringify(res))
    }
    //TODO 除了接口服务错误外,其他日志调接口异步写入日志数据库
    switch(_statusCode){
        case 200:
            break;
        case 401:
            break;
        case 404:
            break;
        default:
            break;
    }
}
import http from "./interface.js"
import env from "../env.js"
import message from "../features/message.js"
import auth from "../authorizations.js"

export default {
    whiteList : [
    ],
    whiteListFilter(url){

    },
    interceptorRequest (request) {
        return request
    },
    interceptorResponse (response) {
        return response
    }
}
1周前 评论
勇敢的心 (楼主) 1周前

luch-request uniapp插件
如何使用下载示例项目照着写就行了,关于重试机制没用过,不知道有没有. 文档可到官网 www.quanzhan.co/luch-request/guide...

以下是几个示例场景:

  1. 大部分请求不需要每次携带 access_token 从而减少 storage 的读取影响速度,又比如我要区分运行在哪个平台
var platform = '';
// #ifdef MP-BAIDU
platform = 'MP-BAIDU';
// #endif
// #ifdef MP-WEIXIN
platform = 'MP-WEIXIN';
// #endif

test.setConfig((config) => { /* 设置全局配置 */
    config.header = {
         ...config.header,
        platform:platform
    }
    config.custom = {
         auth: false, // 是否传token
    }
    return  config
})

在需要权限认证时

this.$http.get('/v1/..', {custom:{auth:true}}).then(..
  1. 拦截器,比如请求前携带 token,配合 vuex store
    http.interceptors.request.use((config) => {
     if (config.custom.auth) {
         config.header.Authorization = store.state.vuex_token;
      }
    return  config
    }, (config) => {
    return  Promise.reject(config)
    })
    还比如响应拦截器中还可以用 http 再发一个请求覆盖之前的请求,比如 响应返回 access_token 过期的响应码 4011,并且后端返回了新的 token,那么可以拿新的 token 再次请求
    http.interceptors.response.use(async (response) => { /* 请求之后拦截器。可以使用async await 做异步操作  */
    if(response.data.data.code ==  4011){
     uni.$u.vuex('vuex_token', response.data.data.access_token);//保存新的token
     //再次发送请求
      let  repeatRes  =  await http.request(response.config);
      if ( repeatRes ) {
          response  =  repeatRes;
     }
    }
     return  response
1周前 评论
勇敢的心 (楼主) 1周前

其实都差不多的,uniapp在小程序底层还是调用的小程序的请求

1周前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!