# Request

**Repository Path**: void_rangers/request

## Basic Information

- **Project Name**: Request
- **Description**: 为简化请求对Axios插件做的特别处理
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: v2.0.0
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-02-25
- **Last Updated**: 2022-12-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Request

#### 介绍
为简化请求对Axios插件做的特别处理


#### 使用说明

```Javascript
var app = new Request({
    url: 'xxxxxxx',
    loading(msg){
        // 加载中的效果 msg => 由loading方法传入的参数
        return $load;   // $load => loading组件，会在hideLoading方法中通过参数传递回来
    },
    hideLoading($load){
        // 关闭加载中的效果
    },
    alert(msg){
        // 请求错误的提示弹框
    },
    pretreatment(res){
        // 请求预处理
    }
});

app.get('xxxxapi', { xx: 'xxx'}).then(res => {
    console.log('xxxapi:', res);
})
```

#### 示例

```Javascript
// 已有 Vue、Vant UI组件
var vant = new Vue();
var app = new Request({
    url: 'http://api.baidu.cn/',
    loading(msg){
        return vant.$toast({
            type: 'loading',
            message: msg || '正在加载...',
            duration: 0,
            forbidClick: true
        });
    },
    hideLoading($load){
        $load.clear();
    },
    alert(msg){
        vant.$dialog.alert({
            title: '温馨提示',
            message: msg,
            confirmButtonText: '好的',
            confirmButtonColor: '#409EFF'
        });
    },
    pretreatment(res){
        // 对于请求返回结果提前做判断，例如：请求错误、登录过期等
        if (res.data.status != 0) {    // 以下为默认处理
            vant.$dialog.alert({
                title: '提示',
                message: res.data.msg || 'ε=(´ο｀*))) 小主~ 网络好像打盹了呢...'
            })
            return false;
        }
    }
});

//Get请求
app.get('login', { user: 'xxxxx'}).then(res => {
    console.log('login result:', res);
});
//Post请求
app.post('login', { user: 'xxxxx'}).then(res => {});
//模拟Form表单请求(请求头的 content-type 类型为 application/x-www-form-urlencoded)
app.form('login', { user: 'xxxx'}).then(res => {});
```


#### API

**Props**
| 参数 | 类型 | 说明 |
| - | - | - |
| url | `String` / `Function` | 请求的接口地址，可以是一个处理函数 |
| headers | `Object` | 请求头设置 |
| loading | `Function` | 显示"加载中"的效果 |
| hideLoading | `Function` | 取消"加载中"的效果 |
| alert | `Function` | 显示 提示弹框 |
| pretreatment | `Function` | 请求预处理 |

**url为处理函数时 用法示例**
```Javascript
var app = new Request({
    url: function(api){ //请求时传入的api接口名称
        let url = 'https://api.baidu.com/index.php?',
            uri = api.split('/');
        console.log('uri:', uri);
        if (uri.length == 1) {
            url = url + 'g=Wxapp&m=Test&a=' + api;
        } else if (uri.length == 2) {
            url += 'g=Wxapp&m=' + uri[0] + '&a=' + uri[1];
        } else {
            url += 'g=' + uri[0] + '&m=' + uri[1] + '&a=' + uri[2];
        }
        return url;
    },
    ......
});

$.get('login', param).then(res => {});   //请求地址 https://api.baidu.com/index.php?g=Wxapp&m=Test&a=login
$.get('Ceshop/login', param).then(res => {});   //请求地址 https://api.baidu.com/index.php?g=Wxapp&m=Ceshop&a=login
```

**Events**
| 事件 | 说明 | 参数 |
| - | - | - |
| get | Get请求 | -- |
| post | Post请求 | -- |
| form | 模拟Form表单请求 | -- |

```Javascript
var app = new Request({
    ......
});

/**
 * @param {string} api        必传,接口名称
 * @param {Object} param      选传,请求所需参数
 * @param {Boolean} loading   选传, loading方法设置(true: 启用, false: 不启用)
 * @param {Boolean} skip      选传, 是否跳过预处理方法[pretreatment](true: 跳过, false: 不跳过)
 * @param {Object} headers    选传, 该次请求中需修改或额外添加的请求头
 * @param {Function} then     请求成功的回调
 * @param {Function} catch    请求失败错误处理
 * **/
app.get(api, param).then(res => {}).catch(err => {});
app.post(api, param).then(res => {}).catch(err => {});
app.form(api, param).then(res => {}).catch(err => {});

//post、form 用法一致
app.get({
    api: '',
    param: '',
    loading: false,
    headers: {},
    skip: false
}).then(res => {
}).catch(err => {});
```


**特殊用法**
1. 当设置 app.debug = true; 时会在调用请求方法时，在控制台打印一些请求过程所包含的数据资料，比如 完整的请求接口、请求参数、请求头的设置、以及回调的成功、失败信息。
设置为 false 即可关闭.
2. 请求设置中 loading 的值若不为 true 或 false 时, 会直接把值传给 loading 方法, 可提前在 longing 方法中处理.
3. 内置了 文本复制 功能, 使用方式: app.setClipboardText('文本')
4. api 可传数组或对象形式, 用以 url 函数传入额外处理参数
5. 内置了 时间戳转换 功能, 使用方式: app.timestampTransform('时间戳', str); str => 转换后的形式, 默认值 'Y-m-d H:i:s'