美文网首页
axios adapter(适配器) 自定义请求方法

axios adapter(适配器) 自定义请求方法

作者: copyLeft | 来源:发表于2019-02-28 16:24 被阅读0次

    axios 配置 adapter, 设置自定义请求方法

    在 axios 配置中提供了[adapter]配置项,
    使用该配置项目, 我们可以设置属于自己的请求方法.

    请求流程

    • req: 发起请求
    • reqContext: 包装请求上下文
    • adapter: 分发
    • dispath: 底层请求接口
    • server: 服务器
    • res: 响应处理
    graph LR
    
    req-->reqContext
    
    reqContext-->adapter
    
    adapter-->dispath
    
    dispath-->server
    
    server-->dispath
    
    dispath-->adapter
    
    adapter-->res
    
    

    从流程图,我们大致知道 adapter 的调用位置, 可以看到 adapter
    是连接 请求与响应的桥梁

    默认 adapter

    在未配置adapter时, axios将提供默认配置

    
    // 默认配合
    var defaults = {
    
      adapter: getDefaultAdapter()
        
      ....  
    }
      
      
     // 分发函数
    function getDefaultAdapter() {
      var adapter;
     
      if (typeof process !== 'undefined' && Object.prototype.toString.call(process) === '[object process]') {
        
        // node环境下使用 node.http
        adapter = require('./adapters/http');
        
      } else if (typeof XMLHttpRequest !== 'undefined') {
        
        // web 环境下使用 xhr 
        adapter = require('./adapters/xhr');
        
      }
      return adapter;
    }
    
    
    

    这里我们看到,adapter 主要根据环境不同,调用不同请求接口,并将数据返回给响应函数.

    启示

    1. 整个请求过程是线性的,不存在路由分发的机制
    2. 通过 adapter 我们可以直接控制 请求及响应.

    使用 adapter 做mock

    这里只做实现的基本模式,在配置 adapter 可能遇到的问题s

    
    // mock数据路由,根据url 返回mock数据
    const mockRouter = {...}
    
    const http = Axios.create({
        
        adapter: config =>{
            
            // 判断是否存在mock数据
            let has = mockRouter.has(config.url)
            
            
            // 调用默认请求接口, 发送正常请求及返回
            if(!data){
            
                // 删除配置中的 adapter, 使用默认值
                delete config.adapter
                
                // 通过配置发起请求
                return Axios(config)
                
            }
            
            // 模拟服务,返回mock数据
            return new Promise((res, rej) =>{
                
                const resInfo = {
                    data: mockRouter.getData(config)
                    status: 200,
                    statusText: 'OK'
                }
                
                // 调用响应函数
                res(resInfo)
                 
            })
            
        }
        
    })
    
    
    

    这里需要注意的是,在使用配置发起请求时,需要删除config中的 自定义adapter, 使用的aixos调用默认请求接口.
    否则将进入递归的死循环

    相关文章

      网友评论

          本文标题:axios adapter(适配器) 自定义请求方法

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