【问题标题】:Redux saga doesn't fetch to apiRedux saga 不获取到 api
【发布时间】:2019-03-01 00:22:25
【问题描述】:

我正在尝试从服务器获取当前用户,但它似乎无法正常工作。我正在使用 redux saga 来提出请求。这是我的传奇,负责请求一些数据`

    import {
  take, put, call, apply
} from 'redux-saga/effects';

import { getUserInfo, GET_USER_INFO } from '../actions';

export default function* currentUserSaga() {
  let data;
  try {
    yield take(GET_USER_INFO);
    const response = yield call(fetch, '/api/current_user');
    data = yield apply(response, response.json);
    console.log(response, 'responseee from user saga');
    yield put(getUserInfo(data));
  } catch (err) {
    console.log(err);
  }
}

所以现在我使用 webpack dev-server 将 API 调用代理到 ​​localhost:5000。这是我的 webpack 配置 `

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');

module.exports = (env) => {
  const isProduction = env === 'production';

  return {
    entry: ['@babel/polyfill', './src/client/index.js'],
    output: {
      path: path.join(__dirname, 'dist'),
      filename: 'bundle.js'
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader'
          }
        },
        {
          test: /\.s?css$/,
          use: [{
            loader: ExtractCssChunks.loader
          }, {
            loader: 'css-loader',
            options: { sourceMap: true, importLoaders: 1 }
          }, {
            loader: 'postcss-loader',
            options: { sourceMap: true }
          }, {
            loader: 'sass-loader',
            options: { sourceMap: true }
          }]
        },
        {
          test: /\.(png|woff|woff2|eot|ttf|svg)$/,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 24576
              }
            }
          ]
        }
      ]
    },
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        filename: 'index.html',
        template: './public/index.html',
        favicon: 'public/images/react.png'
      }),
      new ExtractCssChunks({
        path: path.join(__dirname, 'dist'),
        filename: 'style.css'
      })
    ],
    devServer: {
      contentBase: path.join(__dirname, 'dist'),
      historyApiFallback: true,
      port: 3000,
      proxy: {
        '/auth/eventbrite': 'http://localhost:5000',
        '/api/*': {
          target: 'http://localhost:5000'
        }
      }
    },
    devtool: isProduction ? 'source-map' : 'inline-source-map'
  };
};

我认为问题出在生成器上,因为当我打开浏览器并输入 http://localhost:3000/api/current_user 时,它会给我用户数据的 JSON 对象。任何帮助将不胜感激

【问题讨论】:

  • 这个控制台说什么? console.log(response, 'responseee from user saga');
  • 响应 {type: "basic", url: "localhost:3000/api/current_user", redirected: false, status: 200, ok: true, ...}body: (...)bodyUsed: trueheaders: Headers {}ok: trueredirected: falsestatus: 200statusText: "OK"type: "basic"url: "localhost:3000/api/current_user"proto: Response "responseee from user saga" 如您所见没有数据

标签: reactjs webpack redux redux-saga


【解决方案1】:

你已经成功获得了你必须解析为json格式的数据,执行此操作。

let data = yield call([response, response.json]);
console.log(data); 

或者您甚至可以通过这种方式获取数据。

let data =  yield response.json();
console.log(data)

【讨论】:

  • 控制台data会看到什么
  • SyntaxError: JSON 输入意外结束
  • 收益率(GET_USER_INFO); yield fetch('/api/current_user', { credentials: 'include', method: 'GET', headers: { 'Content-Type': 'application/json' } }).then(res => res.json( )).then(res => console.log(res, '来自用户传奇的数据')); 这样可以,但我想用另一种方式
  • 你确定 api 正在发送一些数据吗?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2017-05-28
  • 2017-04-08
  • 2021-04-23
  • 1970-01-01
  • 1970-01-01
  • 2023-03-11
  • 2019-02-21
相关资源
最近更新 更多