基于dva的fetch進一步簡單封裝

levius 發布于2019-08-23 13:11 / 809人閱讀

摘要：直接上代碼請求方法，默認為的請求頭，默認為是否攜帶，默認為不攜帶同源攜帶同源跨域都攜帶如有不完善，請批評指正。

直接上代碼！

    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)
  }
}

如有不完善，請批評指正。

GPU云服務器云服務器 fetch和axios的區別 dva dva.js 進一步

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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