norse_tools v1.0.2-6

norse tools

简介

个人工具初始版本， 当前仅提供wxRequest拦截器工具

工具wxRequest

wxRequest 是一个基于 wx.request进行封装的一个拦截器配置工具，它有如下特点：

1. 轻量且非常轻量 。
2. 仅支持WX小程序 运行环境
3. 支持请求／响应拦截器。
4. 支持中断、锁住、解锁请求。

安装

使用NPM

npm install norse_tools

引入wxRequest

var WXRequest=require("norsr_tools/wxRequest/WXRequest") 
var http=new WXRequest()

配置config

http.config({
  baseURL: '',
  method: 'POST',
  timeout: 5000,
  header: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})

拦截器

wxRequest支持请求／响应拦截器，可以通过它在请求发起之前和收到响应数据之后做一些预处理。

//添加请求拦截器
wxRequest.interceptors.request.use((config)=>{
    //给所有请求添加自定义header
    config.header["sysCode"]="JD";
    return config;
})

//添加响应拦截器，响应拦截器会在then/catch处理之前执行
wxRequest.interceptors.response.use(
    (response) => {
        //只将请求结果的data字段返回
        return response.data
    },
    (err) => {
        //发生网络错误后会走到这里
        //return Promise.resolve("ssss")
    }
)

请求拦截器中的request对象结构如下：

{
  baseURL,  //请求的基地址
  header, //自定义的请求头
  method, // 请求方法
  timeout, //本次请求的超时时间
  url, // 本次请求的地址
  data, //url get参数(post请求或默认的get参数)    
  ... //options中自定义的属性
}

响应拦截器中的response对象结构如下：

{
  data, //服务器返回的数据
  request  //本次响应对应的请求信息，即上面的request结构
}

在拦截器中执行异步任务

现在，您可以在拦截器中执行异步任务了!

下面我们看一个例子：由于安全原因，我们需要所有的请求都需要在header中设置一个csrfToken，如果csrfToken不存在时，我们需要先请求一个csrfToken，然后再发起网络请求，由于请求csrfToken是异步的，所以我们需要在拦截器中执行异步请求，代码如下：

var csrfToken="";
var http=new WXRequest();
http.interceptors.request.use(function (request) {
  log(`发起请求：path:${request.url}，baseURL:${request.baseURL}`)
  if (!csrfToken) {
    log("没有token，先请求token...");
    //锁定当天实例，后续请求会在拦截器外排队
    http.lock();
    // 异步请求内容
    // .....
    // .....

    http.unlock();//解锁后，会继续发起请求队列中的任务
  } else {
    request.header["csrfToken"] = csrfToken;
  }
})

注意：

1. 当前wxRequest实例会在调用http.lock时会被锁定，fly实例锁定后，接下来的请求在进入请求拦截器前会进入一个队列排队，当解锁后(通过调用http.unlock)，才会进入拦截器，这提供一种同步多个任务的方式。
2. 只有当最终返回request对象时(拦截器传递给你的回调参数)，请求才会继续（如代码中注释）， 否则将会把返回的值作为本次请求。

取消当前未完成的同url请求

下面我们看一个例子：列表数据频繁切换筛选条件情况下要取消上一次请求，我们只需要在options （http.request(options)）中配置cancelRequest: true即会自动取消当前未完成的同url请求 ，代码如下：

var http=new WXRequest();
http.request({
  url: 'http://xxx.a.com:/api/xxx',
  cancelRequest: true
})

注意： 仅配置cancelRequest为true的请求才会进入自动取消未完成请求序列