MyRequest

说明

• MyRequest 是基于 uni.request() 的二次封装，可自定义请求拦截器与响应器

安装

1. npm 安装

 npm install my-uni-request

2. cnpm 安装

 cnpm install my-uni-request

引入

1. import 引入

  import myRequest from "my-uni-request";

配置

1. 请求基地址

  myRequest.config.baseUrl = 'https://your_base_url'; 

2. 请求拦截，配置请求头信息

/* ***************************************************  
 * 请求拦截
 * 配置请求头信息，统一添加token等 
 ****************************************************/
myRequest.interceptor.request = (config)=>{
	let token = localStorage.getItem("Token");
    config.header = {"Authorization": token}
	return config
}

3. 响应拦截

/* ***************************************************  
 * 响应拦截
 * 根据业务或者规范对数据进行统一处理 
 * Msg:ok 返回后台数据，Msg 不为ok，返回响应体
 ****************************************************/``
myRequest.interceptor.response = (res)=>{

    // 401 未授权 跳转到登录界面
		if(res.statusCode=== 401){
			uni.reLaunch({
				url:"/pages/login/login"
			});
    }
    
    //  do what   其它逻辑

    // 请求成功，返回响应数据
    if(res.statusCode=== 200){
      return res.data
    }
    else{

   /* ***********************************************
    ! 重要说明
    * 自定义拦截器
    * 若返回 "err",则错误通过注册回调函数处理
    * 若返回 "reject",则错误通过Promise.reject( ) 抛出，开发者需自行捕获错误
    * 若返回其它值,则当作成功值通过Promise。resolve( ) 返回，需注意
    * @Author: mingyong.g
    * @Date: 2020-10-28 16:07:03
    *************************************************/		
        return "err";
        // return "reject"
    }
}

完整案列

// https.js

// 引入
import myRequest from "my-uni-request";

// 配置请求基地址
myRequest.config.baseUrl = 'https://your_base_url'; 

// 请求拦截
myRequest.interceptor.request = (config)=>{
	let token = localStorage.getItem("Token");
	config.header = {"Authorization": token} 
	return config
}

// 响应拦截
myRequest.interceptor.response = (res)=>{

    // 401 未授权 跳转到登录界面
		if(res.statusCode=== 401){
			uni.reLaunch({
				url:"/pages/login/login"
			});
    }
    
    //  do what   其它逻辑

    // 请求成功，返回响应数据
    if(res.statusCode=== 200){
      return res.data
    }
    else{

   /* ***********************************************
    ! 重要说明
    * 自定义拦截器
    * 若返回 "err",则错误通过注册回调函数处理
    * 若返回 "reject",则错误通过Promise.reject( ) 抛出，开发者需自行捕获错误
    * 若返回其它值,则当作成功值通过Promise。resolve( ) 返回，需注意
    * @Author: mingyong.g
    * @Date: 2020-10-28 16:07:03
    *************************************************/		
        return "err";
        // return "reject"
    }
}

// 导出
export default myRequest

使用

1. 案列

// api.js

import myRequest from "./https.js";

let request = myRequest.request;

export async function loginByUserCode(data){
  let url = "/jnhome/api/UserApi/UserLoginByCode";
  return await request({url,data,loading:true})
}

2. 方法说明

• myRequest.request

调用方式同uni.request(),默认为get请求。需要传入一个对象对位参数，该对象可配置如下信息

  header: {
    'content-type': 'application/json;   charset=UTF-8'  // 请求头
  },
  method: 'GET',    // 请求方法
  // 设置为json，返回后uni.request会对数据进行一次JSON.parse
  dataType: 'json',
  // 此参数无需处理，因为5+和支付宝小程序不支持，默认为text即可
  responseType: 'text',
  loading:false,  //是否显示loading
  loadingText:'loading...',
  tips:""   // 请求成功时通过uni.showToast()展示的信息

案列

myRequest.request({url:"your_url",data:"your_data",method:"GET",loading:true,tips:"数据提交成功！"})

// 为调用方便,loading,tips也可直接传入
myRequest.request({url:"your_url",data:"your_data",method:"GET"},true,"数据提交成功！")

• myRequest.get

对get请求的简化封装。参数单个传入。仅支持url,data,loading,tips

// data为空时，若要继续使用loading,tips参数，则将data设置为""(空字符串)
myRequest.get(url,data,loading,tips)

• myRequest.post

对post请求的简化封装。参数单个传入。仅支持url,data,loading,tips

// data为空时，若要继续使用loading,tips参数，则将data设置为""(空字符串)
myRequest.post(url,data,loading,tips)