更新记录

1.0.1(2019-11-04)

1.0.0(2019-11-04)

  • create
查看更多

功能

  • 统一 loading和异常提示管理
  • 多图上传
  • 接口数据缓存

参数

参数基本上和uni.requsetuni.uploadFile差不多

参数 必填 值类型 默认值 说明
type String request 请求类型 图片上传时改为 file
url String 请求地址
urlType String default 根据设定值,从配置的baseUrl中选择地址
header Object 请求头
loading Boolean 是否显示加载loading,优先级大于config中loading项
success Function 成功回调函数
fail Function 失败回调函数
  • 当type 默认为 request 时的参数
参数 必填 值类型 默认值 说明
data Object/String/ArrayBuffer 请求的参数
method String GET 请求方法
dataType String json 如果设为 json,会尝试对返回的数据做一次 JSON.parse
responseType String text 设置响应的数据类型。合法值:text、arraybuffe
sslVerify Boolean true 请求的参数
cache Object 数据缓存对象中有两个参数,一个是key(缓存名,必须),另一个是time(缓存有效时间单位/秒,可选)如 {key: 'cache_data1',time: 60}
  • 当type 默认为 file 时的参数(图片上传)
参数 必填 值类型 默认值 说明
files Array 需要上传的文件列表。使用 files 时,filePath 和 name 不生效
fileType String 文件类型,image/video/audio,仅支付宝小程序,且必填
filePath String 要上传文件资源的路径
name String 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
formData Object HTTP 请求中其他额外的 form data

除了这些特定的参数,你也可以自定义参数,在请求前后使用,具体看配置文件

使用方法(看不明白的,可以下载示例操作一下)

  • 统一定义 api 如在项目根目录下创建 /api/api.js 文件
// 引入 requset 函数 命名非固定,也可以用 http、ajax 等
import request from '@/js_sdk/bjx-request/index.js'
// get
export const apiGet = data => request({
    url: 'test', // 这种写法在配置baseUrl后可用,也可以直接用完整地址 如 http://xx.xx/test
    data: data
})
// 缓存
export const apiCache = (data,loading) => request({
    url: 'test',
    data: data,
    // 使用缓存
    cache: {
        key: 'cache_test',// 缓存名,可以自动生成,如用URL+查询条件等
        time: 120, // 缓存有效时间 单位/秒
    },
    loading: loading
})
// 图片上传
export const apiUpload = data => request({
    url: 'test/upload',
    type: 'file',
    name: 'image',
    ...data,
})
  • 在需要的页面使用
impost {apiGet,apiCache,apiUpload} from '@/api/api.js'
// 使用
// 1 链式操作
apiGet().then(res => {
    //
}).cache(err => {
    //
})
// 2 success 回调
apiCache({
    data: {},
    success: res => {
        //
    },
    fail: err => {
        //
    }
})
// 3 sasync 函数
(async () => {
    try {
        let res = await apiCache()
        console.log('await',res)
    } catch (e) {
        // 异常
        console.log(e)
    }
})()
  • 局部引入
// 在有需要的页面引入 使用方法同上
import request from '@/js_sdk/bjx-request/index.js'
  • 挂载全局 main.js
import request from '@/js_sdk/bjx-request/index.js'
Vue.prototype.request = request // 如命名有冲突可改其他名字

挂载全局后,无需再在页面中单独引入

// 写法从
request()
// 变成
this.request()
  • 配置文件 config.js
export default {
    // 请求地址,可以多个
    baseUrl: {
        default: '',
        // url1: '', // 定义其他地址
        // wx: '', // 定义其他地址
    },
    // 标识为成功的状态码,其他则作失败处理
    successCode: [200],
     // 缓存有效时间
    cacheTime: 10,
    // 错误统一处理
    errorHandle: true, 
    // 是否显示 loading
    loading: true,
    // 请求前,设置请求头等
    requestBefore(options){
        // console.log('请求前',options)
        options.header = {
            token: 'token'
        }
        return options
    },
    // 请求后 数据处理 或 统一异常处理
    // 返回三个参数 第一是 后台返回的数据,第二个是请求参数,第三个是图片上传时的下标(非图片上传可以忽略)
    requestAfter(data, options, index){
        // console.log('请求后')
        // 可以在options中自定义参数,然后在此使用
        // 如:想根据条件判断是否执行后续代码,可以在发送请求时,设置参数如 options.notAfter = false
        // if(!options.notAfter) return
        //
        // 一般请求 使用统一的异常处理 成功返回时可根据后台自定义的状态码判断是否弹出提示
        if(options.type == 'request' && data.error_code != 0) {
            uni.showModal({
                title:'提示',
                content: data.msg || '请求失败'
            })
        }
        // 如果对数据进行了统一处理,则需要返回处理后的数据
        // return data
    }
}

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问