美文网首页
fly-请求配置&拦截器

fly-请求配置&拦截器

作者: 大乌冬 | 来源:发表于2018-08-13 17:24 被阅读0次

    请求配置

    • 实例级配置:对fly实例发起的所有请求都有效
    fly.config.timeout=5000;
    
    • 单次请求配置:只对当次请求有效
    fly.request("/test",null,{timeout:5000})
    
    可配置项
    • 通用项:所有环境下都有效
    {
      method:"",//请求方法
      headers:{},//请求头
      baseURL:"",//请求基地址
      parseJson:true,//是否将content-type为“application/json"的响应数据转化为JSON对象,默认为true
      timeout:"" //超时时间
    }
    
    • 可选项:根据环境、http engine不同而配置不同 (此部分有待研究)

    拦截器

    在拦截器中执行异步任务
    • 思考题 :拦截器异步任务的使用场景是????

    什么是异步任务:在拦截器里发起一个异步任务,然后等该异步任务结束后才继续往下执行
    如何实现:通过在请求拦截器或者响应拦截器中返回一个promise对象
    注意:fly会根据该promise的最终值判断是否应该继续完成之前网络请求

    1. 如果promise的最终值是fly传给您拦截器的request对象, 那么fly会继续完成之前的请求
    //添加请求拦截器
    fly.interceptors.request.use((request)=>{
       //将request作为promise的最终值
       return Promise.resolve(request)
    })
    
    1. 如果不是request对象,则将promise的最终值作为本次请求的结果,而不会完成之前的请求
    //添加请求拦截器
    fly.interceptors.request.use((request)=>{
        //当promise的最终值不是`request`时,
        //fly会将其作为本次网络请求的结果(而不会继续执行网络请求).
          return Promise.resolve("xx")
    })
    
    fly.get("/test").then(d=>{
      console.log(d)  //输出xx
    })
    
    拦截器锁定
    • 应用场景:如token验证及其在某个接口返回token失效时,先去请求更新token,再继续执行当前请求
    • 什么拦截器锁定:拦截器锁定后,未进入到该拦截器的请求将在拦截器外面排队,暂停网络请求,直到拦截器解锁时,排队的请求才再次进入拦截器继续请求
    fly.lock(); //锁定
    fly.unlock();//解锁
    
    • 实现方式:
      在请求拦截中锁定并执行异步任务:
      由于安全原因,我们需要所有的请求都需要在header中设置一个csrfToken,如果csrfToken不存在时,我们需要先请求一个csrfToken,然后再发起网络请求,由于请求csrfToken是异步的,所以我们需要在拦截器中执行异步请求
    var csrfToken="";
    var tokenFly=new Fly();
    var fly=new Fly();
    fly.interceptors.request.use(function (request) {
      log(`发起请求:path:${request.url},baseURL:${request.baseURL}`)
      if (!csrfToken) {
        log("没有token,先请求token...");
        //锁定当天实例,后续请求会在拦截器外排队,详情见后面文档
        fly.lock();
        return newFly.get("/token").then((d) => {
          request.headers["csrfToken"] = csrfToken = d.data.data.token;
          log("token请求成功,值为: " + d.data.data.token);
          log(`继续完成请求:path:${request.url},baseURL:${request.baseURL}`)
          return request; //只有最终返回request对象时,原来的请求才会继续
        }).finally(()=>{
          fly.unlock();//解锁后,会继续发起请求队列中的任务,详情见后面文档
        })
      } else {
        request.headers["csrfToken"] = csrfToken;
      }
    })
    
    • 在响应拦截器中执行异步任务
      响应拦截器中我们收到服务器返回,然后首先判断是否token过期,如果是,我们重新请求token并重新发起之前的请求
    fly.interceptors.response.use(
      function (response) {  //不要使用箭头函数,否则调用this.lock()时,this指向不对
        log("interceptors.response", response)
        //验证失效
        if (response.data.data.tokenExpired) {
          log("token失效,重新请求token...");
          this.lock(); //锁定响应拦截器,
          return newFly.get("/token")
            .then((d) => {
              csrfToken = d.data.data.token;
              log("token已更新,值为: " + csrfToken);
             })
            .finally(() => this.unlock()) //解锁
            .then(() => {
              log(`重新请求:path:${response.request.url},baseURL:${response.request.baseURL}`)
              return fly.request(response.request);
            })
        } else {
          return response.data.data;
        }
      },
      function (err) {
        log("error-interceptor", err)
      }
    )
    

    完整代码

    2/100
    第一篇文章是上周五写的,周末由于去广州了,不方便带电脑(主要原因还是因为玩去了)。
    还剩98天,继续加油

    相关文章

      网友评论

          本文标题:fly-请求配置&拦截器

          本文链接:https://www.haomeiwen.com/subject/dfjybftx.html