更新记录

1.0.1（2019-11-04）

• 无

1.0.0（2019-11-04）

• create

平台兼容性

功能

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

参数

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

• 当type 默认为 request 时的参数

• 当type 默认为 file 时的参数(图片上传)

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

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

• 统一定义 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
    }
}