基于dva的fetch進(jìn)一步簡(jiǎn)單封裝

levius 發(fā)布于2019-08-23 13:11 / 822人閱讀

摘要：直接上代碼請(qǐng)求方法，默認(rèn)為的請(qǐng)求頭，默認(rèn)為是否攜帶，默認(rèn)為不攜帶同源攜帶同源跨域都攜帶如有不完善，請(qǐng)批評(píng)指正。

直接上代碼！

    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請(qǐng)求方法，默認(rèn)為GET
    headers: {        // HTTP的請(qǐng)求頭，默認(rèn)為{}
      "Content-Type": "application/json"
    },
    credentials: "include" // 是否攜帶cookie，默認(rèn)為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)
  }
}

如有不完善，請(qǐng)批評(píng)指正。

GPU云服務(wù)器云服務(wù)器 fetch和axios的區(qū)別 dva dva.js 進(jìn)一步

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/99274.html

相關(guān)文章

(入門(mén))手把手帶你更簡(jiǎn)單的使用dva

摘要：介紹首先是一個(gè)基于和的數(shù)據(jù)流方案，然后為了簡(jiǎn)化開(kāi)發(fā)體驗(yàn)，還額外內(nèi)置了和，所以也可以理解為一個(gè)輕量級(jí)的應(yīng)用框架。介紹(dva.js) dva 首先是一個(gè)基于 redux 和 redux-saga 的數(shù)據(jù)流方案，然后為了簡(jiǎn)化開(kāi)發(fā)體驗(yàn)，dva 還額外內(nèi)置了 react-router 和 fetch，所以也可以理解為一個(gè)輕量級(jí)的應(yīng)用框架。特性易學(xué)易用，僅有 6 個(gè) api，對(duì) redu...

makeFoxPlay 2019-08-23 10:47 評(píng)論0 收藏0
dva框架使用詳解及Demo教程

摘要：框架的使用詳解及教程在前段時(shí)間，我們也學(xué)習(xí)講解過(guò)框架的基本使用，但是有很多同學(xué)在交流群里給我的反饋信息說(shuō)，框架理解上有難度，看了之后還是一臉懵逼不知道如何下手，很多同學(xué)就轉(zhuǎn)向選擇使用框架。 dva框架的使用詳解及Demo教程在前段時(shí)間，我們也學(xué)習(xí)講解過(guò)Redux框架的基本使用，但是有很多同學(xué)在交流群里給我的反饋信息說(shuō)，redux框架理解上有難度，看了之后還是一臉懵逼不知道如何下手，很...

bergwhite 2019-08-23 11:47 評(píng)論0 收藏0
【單頁(yè)面博客從前端到后端】基于 Passport 和 Koa@2 的權(quán)限驗(yàn)證與 DVA 的 Mode

摘要：我們就采用這種方式來(lái)進(jìn)行權(quán)限驗(yàn)證。這里我還是使用在中的下新增單頁(yè)面博客從前端到后端環(huán)境搭建單頁(yè)面博客從前端到后端基于搭建博客前后臺(tái)界面單頁(yè)面博客從前端到后端基于和的權(quán)限驗(yàn)證與的設(shè)計(jì) 基于 JWT 的權(quán)限驗(yàn)證這里有一篇文章描述的已經(jīng)非常詳盡，闡述了 JWT 驗(yàn)證相比較傳統(tǒng)的持久化 session 驗(yàn)證的優(yōu)勢(shì)，以及基于 angular 和 express 驗(yàn)證的簡(jiǎn)單流程。基于Json ...

luodongseu 2019-08-21 11:44 評(píng)論0 收藏0
Dva + Ant Design 前后端分離之 React 應(yīng)用實(shí)踐

摘要：數(shù)據(jù)緩存對(duì)于一個(gè)應(yīng)用來(lái)說(shuō)，緩存是很重要的一步。所以，比較常見(jiàn)的方法就是將數(shù)據(jù)緩存在中。什么時(shí)候做數(shù)據(jù)緩存例用戶(hù)信息緩存參見(jiàn)在中配置了檢測(cè)中的是否存在。源站鏈接 https://tkvern.com 繼 Rails 從入門(mén)到完全放棄擁抱 Elixir + Phoenix + React + Redux 這篇文章被噴之后，筆者很長(zhǎng)一段時(shí)候沒(méi)有上社區(qū)逛了。現(xiàn)在 tkvern 又回歸了，給...

tainzhi 2019-08-20 14:03 評(píng)論0 收藏0
react中后臺(tái)管理界面

摘要：是一個(gè)用開(kāi)發(fā)的一個(gè)企業(yè)級(jí)中后臺(tái)管理包含常用的業(yè)務(wù)，組件，及數(shù)據(jù)流轉(zhuǎn)方案，前后端分離的開(kāi)發(fā)方式，按業(yè)務(wù)劃分的目錄結(jié)構(gòu)，可以大大提高我們的開(kāi)發(fā)效率下面是整體的介紹，感興趣的同學(xué)可以去官網(wǎng)詳加了解。 dva-boot-admin 是一個(gè)用React開(kāi)發(fā)的一個(gè)企業(yè)級(jí)中后臺(tái)管理UI,包含常用的業(yè)務(wù)，組件，及數(shù)據(jù)流轉(zhuǎn)方案，前后端分離的開(kāi)發(fā)方式，按業(yè)務(wù)劃分的目錄結(jié)構(gòu)，可以大大提高我們的開(kāi)發(fā)效率下面...

dongfangyiyu 2019-08-26 11:54 評(píng)論0 收藏0