fetch-mock嘲笑所有請求

Question

我使用fetch-mock來模擬一些請求到服務器。這是所有的請求是由：

import fetchMock from 'fetch-mock' 
import initialState from 'src/initial-state' 

if (process.env.NODE_ENV === 'development') { 
    fetchMock.post('/some/endpoint', initialState.entities.multichannelEngagement) 
} 

但不是唯一的這個端點被嘲笑，但所做的所有請求同構取

import 'isomorphic-fetch' 
export function makeRequest(endpoint, config = {}) { 
    return window.fetch(endpoint, config) 
    .then(response => { 
    return response.json() 
    .then(json => ({ json, response })) 
    .catch(() => ({ response })) 
}) 
.then(({ json, response }) => { 
    if (!response.ok) { 
    throw json ? json : new Error(response.statusText) 
    } else { 
    return json 
    } 
}) 
.catch((e) => { 
    return Promise.reject(e) 
}) 

}

我webpack.config .js文件如下：

import path from 'path' 
import dotenv from 'dotenv' 
import webpack from 'webpack' 
import info from './package.json' 

const resolvePath = p => path.join(__dirname, p) 

const __DEV__ = process.env.NODE_ENV !== 'production' 

const { parsed: env } = dotenv.load() 
env.NODE_ENV = process.env.NODE_ENV 
Object.keys(env).forEach(k => env[k] = JSON.stringify(env[k])) 

const config = { 
    name: info.name, 

    entry: { 
    app: 'src/index', 
    vendor: Object.keys(info.dependencies) 
    }, 

    output: { 
    path: __DEV__ ? resolvePath('public') : resolvePath('../analytics-server/server/public'), 
    filename: '/js/[name].js', 
    publicPath: '/', 
    debug: __DEV__, 
    pathinfo: __DEV__ 
    }, 

    module: { 
    preLoaders: [{ 
     // NOTE: Run linter before transpiling 
     test: /\.js$/, 
     loader: 'eslint-loader', 
     exclude: /node_modules/ 
    }], 
    loaders: [{ 
     test: /\.js$/, 
     loader: 'babel', 
     exclude: /node_modules/ 
    }, { 
     // TODO: Remove after upgrading to webpack 2 
     test: /\.json$/, 
     loader: 'json' 
    }] 
    }, 

    resolve: { 
    alias: { 
     src: resolvePath('src'), 
     core: resolvePath('src/core'), 
     components: resolvePath('src/components'), 
     modules: resolvePath('src/modules'), 
     services: resolvePath('src/services'), 
     resources: resolvePath('src/resources'), 
     locales: resolvePath('src/locales') 
    }, 
    // NOTE: Empty string to properly resolve when providing extension 
    // TODO: Remove after upgrading to webpack 2 
    extensions: ['', '.js'] 
    }, 

    plugins: [ 
    // NOTE: `NoErrorsPlugin` causes eslint warnings to stop the build process 
    // new webpack.NoErrorsPlugin(), 
    new webpack.optimize.CommonsChunkPlugin('commons', '/js/commons.js'), 
    new webpack.DefinePlugin({ process: { env } }) 
// new webpack.NormalModuleReplacementPlugin(/^fetch-mock$/, path.resolve(__dirname, 'node_modules', 'fetch-mock/src/client.js')) 
    ], 

    eslint: { 
    configFile: resolvePath('.eslintrc') 
    } 
} 

if (__DEV__) { 
    config.devtool = 'source-map' 

    config.devServer = { 
    contentBase: 'public', 
    // NOTE: Options `inline` and `hot` shall be passed as CLI arguments 
    // inline: true, 
    // hot: true, 
    historyApiFallback: true 
    } 
} else { 
    config.plugins.push(...[ 
    new webpack.optimize.DedupePlugin(), 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.optimize.UglifyJsPlugin({ 
     compress: true, 
     acorn: true 
    }) 
    ]) 
} 

export default config 

我得到的錯誤，當我運行的應用程序是 「fetch-mock.js：93未捕獲錯誤：沒有爲GET定義的回退響應至http://localhost:3000/api/session」 這是應用程序中的第一個請求。

不知道爲什麼fetch-mock會嘲笑所有的請求。在chrome控制檯上評估時，makeRequest函數的fetch值是fetch-mock函數，但據我所知這是正確的。

順便說一句，我沒有在測試env，我在開發，因爲我需要我的後端嘲笑，因爲它還沒有完成。

任何想法爲什麼會發生這種情況？

在此先感謝

Answer 1

因爲fetch-mock的主要目標是幫助測試的問題引起的。在測試環境中，如果您發送任何非模擬調用的異常，則會更好。

然而，您可以添加一個catch處理程序，該處理程序委託給原始的fetch，因此任何非模擬的請求都會傳遞到真正的提取。類似以下內容：

/* FAKE FETCH ME */ 
    fetchMock.get('/session', function getSession(url, opts) { 
    const jwt = extractToken(opts) 
    if (!jwt || jwt !== fakeToken) { 
     return delay({ 
     status: 401, 
     body: JSON.stringify({ 
      details: 'Unauthorized' 
     }) 
     }) 
    } 
    return delay({ 
     status: 200, 
     body: JSON.stringify({ 
     success: true, 
     data: fakeUserDetails 
     }) 
    }) 
    }) 
    .catch(unmatchedUrl => { 
    // fallover call original fetch, because fetch-mock treats 
    // any unmatched call as an error - its target is testing 
    return realFetch(unmatchedUrl) 
    }) 

該庫過去有一個選項，但它已在V5中刪除。請參閱文件的位置：

In previous versions fetch-mock had a greed property, set to

• good - unmatched calls respond with a 200
• bad - unmatched calls error
• none - allow unmatched calls to use native fetch and the network

This has now been replaced by a .catch() method which accepts the same types of response as a normal call to .mock(matcher, response). It can also take an arbitrary function to completely customise behaviour of unmatched calls. It is chainable and can be called before or after other calls to .mock(). The api to check for unmatched calls remains unchanged.

https://github.com/wheresrhys/fetch-mock/blob/master/V4_V5_UPGRADE_NOTES.md#handling-unmatched-calls-greed