小编Ama*_*mar的帖子

与 fetch 相比，我更喜欢 axios，因为它简单易用。我正在运行一个本地开发服务器，它将 AJAX 请求发送到某个远程端点。由于同源策略，请求被阻止。所以我修改了我的 webpack 配置，如下所示：

devServer: {
  headers: {
    'Access-Control-Allow-Origin': '*',
  },
},

现在，如果我使用 fetch 发出 API 请求，我添加"mode": "no-cors"允许跨源请求，一切正常。但是，这不适用于 axios。

fetch 基于Request API，允许指定模式：“no-cors”，而 axios 基于 XHR，不支持指定模式。chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security我可以通过运行where is 我的文件系统的某些路径来打开不安全的 chrome 窗口来解决此问题--user-data-dir。但是，不安全的 chrome 实例不允许运行扩展，因此我无法使用 React 和 Redux DevTools。这是使用 fetch 和 axios 发出请求的片段。当 axios 失败时 fetch 调用有效：

componentDidMount() {
  fetch(someAPIEndpoint, {
    mode: 'no-cors',
  })
  .then(response => console.log(response))
  .catch(error => console.error(error))

  axios
  .get(someAPIEndpoint, {
      mode: 'no-cors',
  })
  .then(results => …

我写了一个简单的减速器：

const simpleCounterReducer = (state = 0, action) => {
    switch (action.type) {
        case 'INCREMENT_COUNT':
            return state + 1;
        case 'DECREMENT_COUNT':
            return state - 1;
        default:
            return state;
    }
};

export default simpleCounterReducer;

然后进行一些简单的测试，以涵盖所有可能的选项。

import simpleCounterReducer from '../src/reducers/simple-counter.js';

describe('counter works and', () => {
    test('can handle increments', () => {
        expect(
            simpleCounterReducer(0, {
                type: 'INCREMENT_COUNT'
            })
        ).toBe(1);
    });

    test('can handle decrements', () => {
        expect(
            simpleCounterReducer(1, {
                type: 'DECREMENT_COUNT'
            })
        ).toBe(0);
    });

    test('can handle invalid actions', () => {
        expect( …