フェッチリクエストのカプセル化

1. まず、react プロジェクトの下の src フォルダーに utils フォルダーを作成し、次に utils フォルダーに新しいindex.js ファイルを作成します。

Index.js にコードを書く

const querystring = require("querystring");
export function httpGet (url) {
    
    
  const result = fetch(url)
  return result;
}
export function httpPost(url, params) {
    
    
  const result = fetch(url, {
    
    
    method: "POST",
    headers: {
    
    
      "Content-type": "application/x-www-form-urlencoded",
      "Accept":"application/json,text/plain,*/*"
    },
    body: querystring.stringify(params)
  })
  return result
}

2. 次に、src内に新しいフォルダーを作成し、そのapiフォルダーにindex.jsとapi.jsを書き込む必要があります
   。

import {
    
      httpGet, httpPost } from '../utils/index'
import base from './base'
const api = {
    
    
  getChengpin () {
    
    
    return httpGet(base.ownUrl + base.chengpin)
  },
  getLogin(params) {
    
    
    return httpPost(base.ownUrl + base.login, params)
  }
}
export default api

2.2 Base.js（設定ファイル）の記述方法

const base = {
    
    
  ownUrl: "http://iwenwiki.com",
  chengpin: "/api/blueberrypai/getChengpinInfo.php",
  login: '/api/blueberryapi/login.php'
}
export default base

記事の終わり