基于dva的fetch进一步简单封装

levius 发布于2019-08-23 13:11 / 670人阅读

摘要：直接上代码请求方法，默认为的请求头，默认为是否携带，默认为不携带同源携带同源跨域都携带如有不完善，请批评指正。

直接上代码！

    import fetch from "dva/fetch";

function parseJSON(response) {
  return response.json();
}

function checkStatus(response) {
  if (response.status >= 200 && response.status < 300) {
    return response;
  }

  const error = new Error(response.statusText);
  error.response = response;
  throw error;
}

const parseQuery = (obj) => {
  let str = ""
  for (let key in obj) {
    const value = typeof obj[key] !== "string" ? JSON.stringify(obj[key]) : obj[key]
    str += "&" + key + "=" + value
  }
  return str.substr(1)
}
/**
 * Requests a URL, returning a promise.
 *
 * @param  {string} url       The URL we want to request
 * @param  {object} [options] The options we want to pass to "fetch"
 * @return {object}           An object containing either "data" or "err"
 */
const request = (url, method = "get", data) => {
  const options = {
    method: method,   // HTTP请求方法，默认为GET
    headers: {        // HTTP的请求头，默认为{}
      "Content-Type": "application/json"
    },
    credentials: "include" // 是否携带cookie，默认为omit,不携带; same-origi,同源携带; include,同源跨域都携带
  }
  if (method === "get") {
    url += "?" + parseQuery(data)
  } else {
    options.body = JSON.stringify(data)
  }
  return fetch(url, options)
    .then(checkStatus)
    .then(parseJSON)
    .then(data => ({ data }))
    .catch(err => ({ err }));
}
export default {
  get (url, data) {
    return request(url, "get", data)
  },
  post (url, data) {
    return request(url, "post", data)
  }
}

如有不完善，请批评指正。

服务器托管私有云 fetch和axios的区别 dva dva.js 进一步

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99274.html

(入门)手把手带你更简单的使用dva

摘要：介绍首先是一个基于和的数据流方案，然后为了简化开发体验，还额外内置了和，所以也可以理解为一个轻量级的应用框架。介绍(dva.js) dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。特性易学易用，仅有 6 个 api，对 redu...

makeFoxPlay 2019-08-23 10:47 评论0 收藏0
dva框架使用详解及Demo教程

摘要：框架的使用详解及教程在前段时间，我们也学习讲解过框架的基本使用，但是有很多同学在交流群里给我的反馈信息说，框架理解上有难度，看了之后还是一脸懵逼不知道如何下手，很多同学就转向选择使用框架。 dva框架的使用详解及Demo教程在前段时间，我们也学习讲解过Redux框架的基本使用，但是有很多同学在交流群里给我的反馈信息说，redux框架理解上有难度，看了之后还是一脸懵逼不知道如何下手，很...

bergwhite 2019-08-23 11:47 评论0 收藏0
【单页面博客从前端到后端】基于 Passport 和 Koa@2 的权限验证与 DVA 的 Mode

摘要：我们就采用这种方式来进行权限验证。这里我还是使用在中的下新增单页面博客从前端到后端环境搭建单页面博客从前端到后端基于搭建博客前后台界面单页面博客从前端到后端基于和的权限验证与的设计基于 JWT 的权限验证这里有一篇文章描述的已经非常详尽，阐述了 JWT 验证相比较传统的持久化 session 验证的优势，以及基于 angular 和 express 验证的简单流程。基于Json ...

luodongseu 2019-08-21 11:44 评论0 收藏0
Dva + Ant Design 前后端分离之 React 应用实践

摘要：数据缓存对于一个应用来说，缓存是很重要的一步。所以，比较常见的方法就是将数据缓存在中。什么时候做数据缓存例用户信息缓存参见在中配置了检测中的是否存在。源站链接 https://tkvern.com 继 Rails 从入门到完全放弃拥抱 Elixir + Phoenix + React + Redux 这篇文章被喷之后，笔者很长一段时候没有上社区逛了。现在 tkvern 又回归了，给...

tainzhi 2019-08-20 14:03 评论0 收藏0
react中后台管理界面

摘要：是一个用开发的一个企业级中后台管理包含常用的业务，组件，及数据流转方案，前后端分离的开发方式，按业务划分的目录结构，可以大大提高我们的开发效率下面是整体的介绍，感兴趣的同学可以去官网详加了解。 dva-boot-admin 是一个用React开发的一个企业级中后台管理UI,包含常用的业务，组件，及数据流转方案，前后端分离的开发方式，按业务划分的目录结构，可以大大提高我们的开发效率下面...

dongfangyiyu 2019-08-26 11:54 评论0 收藏0