react-封装 fetch 请求方法

1、封装请求

创建 http.js

/**
 * 封装请求
 */
import qs from 'querystring'

/**
 * get
 */
export function httpGet(url) {
  const result = fetch(url)
  return result
}
/**
 * post
 */
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: qs.stringify(params)
  })
  return result
}

2、请求地址管理

创建 base.js

/**
 * 请求地址管理
 */
const base = {
  // http://iwenwiki.com/api/blueberryapi/getChengpinInfo.php
  ownUrl: 'http://iwenwiki.com',
  chengpin: '/api/blueberryapi/getChengpinInfo.php',
  login: '/api/blueberryapi/login.php'
}

export default base

3、请求方法管理

创建 api.js

/**
 * 业务请求方法管理
 */
import { httpGet, httpPost } from '../utils/http'
import base from './base'

const api = {
  getChegnpin() {
    const url = base.ownUrl + base.chengpin
    return httpGet(url)
  },
  getLogin(params) {
    const url = base.ownUrl + base.login
    return httpPost(url, params)
  }
}

export default api

4、使用请求

在组件中引入 api.js

import React from 'react'
// 使用封装的fetch进行请求
import api from './api'

class App extends React.Component {
  constructor(props) {
    super(props)
  }
  componentDidMount() {
    // 使用封装的get请求
    api.getChegnpin().then(res => {
      console.log(`fetch封装的get请求-res`, res)
      return res.json()
    }).then(data => {
      console.log(`fetch封装的get请求`, data)
    })
    // 使用封装的post请求
    api.getLogin({
      user_id: '[email protected]',
      password: 'iwen123',
      verification_code: 'crfvw'
    }).then(res => {
      console.log(`fetch封装的post请求-res`, res)
      return res.json()
    }).then(data => {
      console.log(`fetch封装的post请求`, data)
    })
  }
  render() {
    return (
      <div></div>
    );
  }
}

export default App;

结果：