我使用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，我在开发，因为我需要嘲笑我的后端，因为它还没有完成。
知道为什么会发生这种事吗？
提前感谢
问题的产生是因为fetch-mock的主要目标是帮助进行测试。在测试环境中，如果您为正在调度的任何非模拟调用获得一个异常，那会更好。
但是，您可以添加一个委托给原始fetch的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中被删除了。请参阅此处的文档：
在以前的版本中，fetch mock有一个贪婪属性，设置为
- 良好-无与伦比的呼叫响应为200
- 错误-不匹配调用错误
- none-允许不匹配的调用使用本机获取和网络
它现在已经被接受相同内容的.catch()方法所取代响应类型作为对.mock(matcher，response)的正常调用。它可以还采用任意函数来完全自定义无法匹配的呼叫。它是可链接的，可以在之前或之后调用对.mmock()的其他调用。用于检查不匹配调用的api仍然存在不变。
https://github.com/wheresrhys/fetch-mock/blob/master/V4_V5_UPGRADE_NOTES.md#handling-无与伦比的呼叫贪婪
自从fetch mock v.6.5以来，有一个名为fallbackToNetwork的新配置属性，允许您控制fetch-mock如何处理未处理(不匹配)的调用
http://www.wheresrhys.co.uk/fetch-mock/#usageconfiguration