阅读 1349

Next.js脚手架进阶 — 封装fetch && 增加中间件

Next.js脚手架进阶系列

封装fetch

首先先来说一下为什么要用fetch而不是axios吧,主要有以下两点:

  • 第一,我在另一个脚手架express-react-scaffold里使用的就是axios,秉着学习新东西的想法,想自己封装一下fetch。
  • 第二,个人觉得fetch的功能更为强大,因为fetch是原生支持的API,更加的底层,所以可扩展性更好,经过封装扩展过后的fetch应该是很强大的,由于看了很多成熟脚手架用的都是fetch,我觉得这个观点还可以接受吧。(P.S.个人观点,不喜勿喷)

fetch的response

为什么要单独说一下fetch的response呢,个人认为这一点既是fetch的缺点又是fetch的优点,我们先来对比一下正常的请求fetch和axios的区别

// fetch
fetch(url)
    .then(res => { // 第一层res
        res.json() // 需要json过后才是我们想要的数据
            .then(r => { // 第二层res        
               console.log(r) // 获取到最后数据       
        })
});

// axios
axios(url)
    .then(res=>{ // 第一层res
        console.log(res); // 获取到我们想要的数据
});

复制代码

如上面所示,我们需要先对fetch的res进行res.json()之后才拿到我们想要的json数据,而axios帮我们做了,使用起来更简单~

这算是一个缺点吧~但是!!!我们通过封装完全可以解决的,接下来就是为啥这也是fetch的优点了,首先来说说为啥fetch需要两层才可以,第一层进行的是res.json(),因为fetch的response是一个综合各种方法的对象,并不是请求的数据,也就是说其实fetch不仅可以是一个json对象,还可以是其他很多的,如果我们需要的是json对象,就res.json(),如果需要的是文本字符串,可以res.text(),它还可以直接获取blob内容,res.blob()。综上所述,fetch是真的真的很强大,就看你擅不擅长封装使用了。

事先声明,我上面吹了那么久,其实我个人觉得我也不算太会使用哈,下面的封装也就是简单的封装,各位看官按需使用,可以在我基础之上针对自己的项目进行更好的封装,或者就直接自己封装就可以了。

fetch的缺点

  • 获取数据的方式需要两层
  • fetch只对网络请求报错,对400,500都当做成功的请求
  • fetch不会携带cookie,需要添加配置
  • fetch不支持timeout ...

上面讲了fetch的几个缺点,其实这些缺点都是可以通过封装以及插件来进行弥补的。

封装fetch的流程以及目的

  • 人性化的使用方式,get, post, put, delete, patch等方法的调用
  • 满足大部分场景的数据获取方式,也就是直接res.json()
  • 支持timeout
  • 错误处理
  • 配合日志组件

封装代码

import fetch from 'isomorphic-unfetch';
import qs from 'query-string';
import { filterObject } from './util';

// initial fetch
const nextFetch = Object.create(null);
// browser support methods
// ['DELETE', 'GET', 'HEAD', 'OPTIONS', 'POST', 'PATCH', 'PUT']
const HTTP_METHOD = ['get', 'post', 'put', 'patch', 'delete'];
// can send data method
const CAN_SEND_METHOD = ['post', 'put', 'delete', 'patch'];

HTTP_METHOD.forEach(method => {
  // is can send data in opt.body
  const canSend = CAN_SEND_METHOD.includes(method);
  nextFetch[method] = (path, { data, query, timeout = 5000 } = {}) => {
    let url = path;
    const opts = {
      method,
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        Accept: 'application/json'
      },
      credentials: 'include',
      timeout,
      mode: 'same-origin',
      cache: 'no-cache'
    };

    if (query) {
      url += `${url.includes('?') ? '&' : '?'}${qs.stringify(
        filterObject(query, Boolean),
      )}`;
    }

    if (canSend && data) {
      opts.body = qs.stringify(filterObject(data, Boolean));
    }

    console.info('Request Url:', url);

    return fetch(url, opts)
      .then(res => res.json())
      .then(({ errcode = 0, errmsg, data }) => {
        if (errcode !== 0) {
          const err = new Error(errmsg);
          err.message = errmsg;
          err.code = errcode;
          err.data = data;
          throw err;
        }
        return data;
      });
  };
});

export default nextFetch;
复制代码

封装完之后的使用:

// /redux/sagas/user/userList.js
...
import nextFetch from '../../../core/nextFetch';

export function* userList() {
  while (true) {
    yield take(FETCH_USER_LIST);
    try {
      // 新写法
      const data = yield nextFetch.get(api.getUserList);
      // 原来的写法
      // const res = yield fetch(api.getUserList);
      // const { data } = yield res.json();
      yield put(fetchUserListDataSuccess(data));
    } catch (error) {
      console.log(error.code, error.message, error.data);
      yield put(fetchUserListDataFali(error));
    }
  }
}
复制代码

为什么使用的是isomorphic-unfetch, 因为Next.js是服务端渲染,这个标榜的是前后端都通用~以前我用的服务端渲染框架因为是分离的,前后端使用的是不同的fetch(前端是whatwg-fetch,后端是node-fetch)。

上面是我自己的封装方式,我默认后端返回的是一个json格式的数据,然后里面有三个字段{ data, errcode, errmsg },并且成功的响应code = 0。小伙伴们根据自己的项目结构适当进行更改。

增加中间件

这个就很简单了,redux的中间件系统,为什么增加中间件呢,因为上面我们增加了fetch的error处理,那么我们就可以对失败的请求在中间件这个地方进行提前处理~

// /redux/store.js
import userMiddleware from '../middlewares/client/user';
...
// 增加redux中间件
const bindMiddleware = (middleware) => {
  // add route middleware
  middleware.push(userMiddleware);
  ...
  return applyMiddleware(...middleware);
};

// /middles/client/user.js
import { message } from 'antd';
import {
  FETCH_USER_LIST_FAIL
} from '../../constants/ActionTypes';

export default ({ getState }) => next => action => {
  // redux中间件
  const ret = next(action);
  switch (action.type) {
    case FETCH_USER_LIST_FAIL: {
      message.error('获取用户列表失败, 请稍后重试');
      break;
    }
    default:
  }
  return ret;
};

复制代码

效果如图所示:

结论

今天这个就很简单了,也不是什么高级的东西,都是随手拿来用的,只不过封装起来方便使用一些,感觉这个脚手架到这真的可以直接进行项目的开发了,可能还差一个前端日志功能吧,下面有时间写写前端日志~

代码地址