更新记录

1.0.2（2021-09-07）

初次发布。

平台兼容性

EXPLAIN-CREQ

框架交流QQ群：970799055。

使用方式

HTTP请求

request(url, method, options)

options基本参数

import creq from '@/uni_modules/explain-creq/js_sdk/explain-creq.js'

creq.request('http://www.example.com', 'post', {
    data: {
        id: 9,
        name: 'Sansnn'
    }
}).then(res => {
    console.log(res)
})

explain-unicloud云函数请求

callFunction(service, action, options)

options基本参数

import creq from '@/uni_modules/explain-creq/js_sdk/explain-creq.js'

creq.callFunction('service', 'action', {
    name: 'cloudfunctionName',
    data: {
        id: 9,
        name: 'Sansnn'
    }
}).then(res => {
    console.log(res)
})

请求拦截和响应拦截

import creq from '@/uni_modules/explain-creq/js_sdk/explain-creq.js'

// HTTP请求拦截器
creq.interceptor.request = {
    // 请求拦截
    request: (options, extend) => {
        return options // 必须返回options
    },
    // 响应拦截
    response: (res, options, extend) => {},
    // 错误处理
    error: (err, options, extend) => {}
}

// explain-unicloud云函数请求拦截器
creq.interceptor.callfunction = {
    // 请求拦截
    request: (options, extend) => {
        return options // 必须返回options
    },
    // 响应拦截
    response: (res, options, extend) => {},
    // 错误处理
    error: (err, options, extend) => {}
}

全局使用

import Creq from './uni_modules/explain-creq/js_sdk/explain-creq.js'
Vue.prototype.$creq = Creq

// 拦截器
import CreqInterceptorRequest from './common/creq.interceptor.request.js'
Vue.prototype.$creq.interceptor.request = CreqInterceptorRequest
import CreqInterceptorCallFunction from './common/creq.interceptor.callfunction.js'
Vue.prototype.$creq.interceptor.callfunction = CreqInterceptorCallFunction

然后在页面通过this.$creq调用

onLoad () {
    this.$creq.request('http://www.example.com?name=creq', 'get')
        .then(res => {
            console.log(res)
        })
}

高级使用

可在options中自定义参数，然后到拦截器中使用，以下是一个自定义全局请求loading的案例，在请求发送前显示loading效果，然后在响应成功后自动关闭loading

1. 先在common目录创建拦截器，/common/creq.interceptor.request.js，并在main.js中引入，以全局使用中为例
2. 书写拦截器

let interceptor = {
    request: (options, extend) => {
        if (typeof extend.showLoading === 'object') {
            uni.showLoading(extend.showLoading)
        }
        return options
    },
    response: (res, options, extend) => {
        if (extend.showLoading && (extend.hideLoading === true || typeof extend.hideLoading === 'undefined')) {
            uni.hideLoading() // 响应成功后立马关闭loading
        } else if (extend.hideLoading === false) {
            // 手动关闭loading
        }
    }
}

module.exports = interceptor

3. 在页面中使用

this.$creq
    .request('http://www.example.com', 'get', {
        showLoading: {
            mask: true
        }
    })
    .then(res => {
        this.res = res.data
    })

更多示例请下载示例项目查看