react - fetch 请求

import React from 'react';
class App extends React.Component {
  componentDidMount() {
    fetch('https://douban.uieee.com/v2/movie/in_theaters')
    .then( res => {
      return res.json()
    }).then(data => {
      console.log(data)
    })
  }
  render() {
    return (
      <div>
        hello
      </div>
    )
  }
}
export default App;

跨域解决方案 1

package.json 中配置如下
"proxy": "http://tingapi.ting.baidu.com"

跨域解决方案 2

cnpm i --save-dev http-proxy-middleware
src下创建 setupProxy.js 文件
const {createProxyMiddleware} = require('http-proxy-middleware')
module.exports = function(app) {
  app.use('/api', createProxyMiddleware({ target: 'http://localhost:3100', changeOrigin: true }));
  // 多个
  app.use('/api', createProxyMiddleware({ target: 'http://localhost:3100', changeOrigin: true }));
}

封装fetch请求

• 新建utils文件夹， http.js 文件

/**
 * get  post请求
 */
import qs from 'querystring'
export async function httpGet(url) {
  const result = await fetch(url).then(res=>res.json())
  return result
}
export function httPost(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)
  }).then(res=>res.json())
  return result
}

• 新建api文件夹， base.js

const baseUrl = ''
const base = {
  url1: 'https://douban.uieee.com/v2/movie/in_theaters',
  url2: baseUrl + '/usl2'
}
export default base

• 新建index.js

import { httpGet } from '../utils/http'
import base from './base'
/**
 * 有多少的请求， 一次性看到
 * redux 的actions 集中在一起
 */
 const api = {
   getChengpin() {
     return httpGet(base.url1)
   }
 }
 export default api