window.location.href 加请求头_前端项目请求层封装过程

调用 ajax 取请求后端数据是项目中最基础的功能。但是如果每次直接调用底层的浏览器 api 去发请求则非常麻烦。现在来分析一下怎么封装这一层，看看有哪些基础问题需要考虑。本文底层使用 fetch ，如果你使用 XMLHttpRequest 甚至第三方库（譬如：axios）封装过程都是大同小异的。

封装重复代码

对于同一个项目通常来说请求参数有很多重复的内容，譬如 url 的拼接，http head 的设置。假设我们调用的是 RESTful 接口，通常我们需要变动的有：1. 请求 url 的 path 部分；2. 参数；3. 请求 method；4. 成功/失败回调函数。我们看下把重复代码封装成一个 ApiSender 的示例代码：

const URL_PREFIX = 'xxx';

let ApiSender = {
  send( options ) {
    let {
      path,
      params,
      method,
      success,
      fail
    } = options;

    let url = URL_PREFIX + path;
    if ( method==='GET' ) {
      url += ('?'+toQueryString( params ));
    }
    let requestBody;
    if ( method==='POST' ) {
      requestBody = params;
    }

    fetch( url, {
      method: method,
      // 这里假设我们项目请求头固定这两个
      headers: {
        'Accept': 'application/json, text/javascript, */*; q=0.01',
        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
      },
      credentials: 'include',
      body: requestBody
    } ).then( function(response){
      let resultJson = response.json();
      if ( /* 判断返回没有错误 */ ) {
        success && success( resultJson );
      } else {
        fail && fail( resultJson.error );
      }
    } );
  }
}

使调用可读性更好

以上封装了一个 ApiSenderÿ