介绍

开发不易，能给插件一个好评**吗，拜托了！

封装uni-app的request方法，使用方法更简单、方便
支持：请求和响应拦截，对象内的函数回调或Promise，支持typescript
推荐更新到最新版本

兼容性问题、设置**超时时间，**请查看官方文档官方文档: https://uniapp.dcloud.io/api/request/request?id=request

下载地址

github: https://github.com/2460392754/uniapp-tools/tree/master/request
dcloud: https://ext.dcloud.net.cn/plugin?id=468

更新日志

https://ext.dcloud.net.cn/plugin?id=468&update_log

1.全局参数 (setConfig)

参数列表

参数	类型	默认值	说明
url	String		基地址(baseUrl)
dataType	String	json	对返回的数据做一次 JSON.parse
responseType	String	text	设置响应的数据类型
contentType	String	form	设置请求参数的数据类型，默认已添加utf-8
header	Object		设置请求的 header，header 中不能设置 Referer，header中设置”content-type”参数会覆盖上面的方法

如何配置全局文件

1.单独引用

// main.js
import request from '@/utils/request.js';
// 设置全局参数
request.setConfig({
  url:"http://www.baidu.com",    // 基地址
  dataType:"json",    // 响应数据格式化
  header:{    // 请求头, 可选
    token:"xxxx"
  }
});

2.直接引用配置文件(v1.2版本新增) 推荐
配置文件部分代码如下

// plugins/request/js/index
import request from './request';
// 设置全局配置
request.setConfig({
    url: 'https://easy-mock.com/mock/',  // 基地址
    // contentType: 'json',
    header: {
        // uid:'xxxx'
    }
});

2.全局拦截器 (interceptors)

1.单独引用

/**
 * @description: 请求拦截器
 * @param {object} 当前请求配置参数
 * @return 不return对象，则不发送当前请求
 */
request.interceptors.request(config => {
  return config;
});
/**
 * @description: 响应拦截器
 * @param {object} 当前请求成功回调数据
 * @return 不return对象，则不返回数据
 */
request.interceptors.response(res => {
  return res;
})

2.直接引用配置文件(v1.2版本新增) **推荐配置文件部分代码如下

import request from './request';
// 不return config或者return false, 都不会发送请求(例如配置token)
request.addInterceptors.request(config => {
    return config;
})
// 不return res或者return false, 则都不会返回值
// return Promise.reject('xxxxx')，主动抛出错误
request.addInterceptors.response(res => {
    let firstCodeNum = String(res.statusCode).substr(0, 1)
    // 2xx
    if (firstCodeNum === '2') {
        // do something
        return res;
    }
    // 3xx
    if (firstCodeNum === '3') {
        // do something
        return res;
    }
    // 4xx or 5xx
    if (firstCodeNum === '4' || firstCodeNum === '5') {
        // do something
        return Promise.reject(res)
    }
    // 停止发送请求 request.stop()
    if (JSON.stringify(res) === '{"errMsg":"request:fail abort"}') {
        // do something
        return false;
        // return Promise.reject('xxxxxxxxx');
    }
    return Promise.reject(res)
})

3.实例 (Example)

参数列表

实例里的数据优先级更高，相同参数会覆盖全局设置里的参数

参数	类型	必填	默认值	说明
url	String	是		填写相对路径，如果没设置基地址(baseUrl)，则填写绝对路径
header	Object			设置请求的header参数
dataType	String		json	设置返回的数据格式
responseType	String		text	设置响应的数据类型
contentType	String		form	设置请求参数的数据类型，默认已添加utf-8
data	Object			设置请求的参数
success	Function			接受服务器返回参数的回调函数
fail	Function			接口调用失败的回调函数
complete	Function			接口调用结束的回调函数（调用成功、失败都会执行）
then、catch	Promise			默认返回Promise,使用回调函数就不会运行返回Promise
finally	Promise			和complete一样，但是没有返回值

contentType参数设置，默认添加utf-8

类型	说明
json	application/json
form	application/x-www-form-urlencoded，默认值
file	multipart/form-data

success、complete和then返回参数说明

参数	类型	说明
statusCode	Number	服务器返回的 HTTP 状态码
errMsg	String
data	Object/String/ArrayBuffer	服务器返回的数据
header	Object	服务器返回的 HTTP Response Header

get

Request
  .get({
    url: "https://www.easy-mock.com/mock/xxxxxxxxx",
      data: {
      name: "xxx"
    },
      header:{ 
      "token": "xxx"
    },
  })
  .then(res => {
    console.log(res)
  })
  .catch(res => {
    console.log(res)
  });

post

Request
  .post({
    url: "https://www.easy-mock.com/mock/xxxxxxxxx",
      data: {
      name: "xxx"
    },
      header:{ 
      "token": "xxx"
    },
  })
  .then(res => {
    console.log(res)
  })
  .catch(res => {
    console.log(res)
  });

stop

let e = Request.get({ url: "/get" });
Request.stop(e)

4.如何使用(demo)

1.单独使用

// 引入文件
import request from '@/utils/request.js';
// 设置全局参数
request.setConfig({
  url:"http://www.baidu.com",    // 基地址,  可选
  dataType:"json",    // 传参方式, 可选
  header:{    // 请求头, 可选
    token:"xxxx"
  }
});
/**
 * @description: 请求拦截器
 * @param {object} 当前请求配置参数
 * @return 不return对象，则不发送当前请求
 */
request.interceptors.request(config => { 
  return config;
});
/**
 * @description: 响应拦截器
 * @param {object} 当前请求成功回调数据
 * @return 不return对象，则不返回数据
 */
request.interceptors.response(res => {
  return res;
});
let e = Request
    .get({
        url: "/get",
        // 实例里的header参数内容会覆盖全局里的header参数内容
        header: {
            "content-type": "application/json"
        },
        data: {
            name: "xxx",
        },
        // 对象内的回调函数优先级高于Promise, 所以下面的then、catch和finally不运行
        success: res => {
            // do something
        },
        fail: res => {
            // do something
        },
        complete: res => {
            // do something
        }
    })
e
    .then(res => {
        // do something
    })
    .catch(res => {
        // do something
    })
    .finally(() => {
        // do something
    })
// 停止发送请求
Request.stop(e)

2.引用配置文件(推荐)

// index.vue
<template>
    <div></div>
</template>
<script>
import request from '../../plugins/request/js/index'
export default {
    methods: {
        $_callback () {
            let r = request.get({
                url: "https://easy-mock.com/mock/5cda87e31d38be0d2dd91a44/example/get",
                data: {
                    a: "aaaa"
                },
                contentType: "form",
                success: res => {
                    console.log("success", res);
                },
                fail: err => {
                    console.log("fail", err);
                },
                complete: res => {
                    console.log("complete: ", res);
                }
            });
            // request.stop(r);
        },
        $_promise () {
            let r = request
                .get({
                    url: "https://easy-mock.com/mock/5cda87e31d38be0d2dd91a44/example/get",
                })
                .then(res => {
                    console.log("then: ", res);
                })
                .catch(err => {
                    console.log("catch", err);
                })
                .finally(() => {
                    console.log("is finally");
                });
            // request.stop(r);
        }
    },
    created () {
        this.$_callback();
        // this.$_promise();
    }
}
</script>

最后

出现bug了？
遇到无法解决的问题？
直接加我q或者发邮件也行

email: 2460392754@qq.com
qq: 2460392754

欢迎交流或探讨问题！

uni-app 插件开发

v1.3以下

介绍

下载地址

更新日志

1.全局参数 (setConfig)

参数列表

如何配置全局文件

2.全局拦截器 (interceptors)

3.实例 (Example)

参数列表

get

post

stop

4.如何使用(demo)

1.单独使用

2.引用配置文件(推荐)

最后