为什么 mailchimp API 不能与 fetch 一起使用？答案

【问题标题】：Why isn't mailchimp API working with fetch?为什么 mailchimp API 不能与 fetch 一起使用？
【发布时间】：2016-12-06 16:30:22
【问题描述】：

我正在尝试将电子邮件地址添加到我拥有的 mailchimp 列表中。

这是一个反应原生应用程序，我正在尝试使用 fetch 来实现请求。

这是我在组件中的代码：

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { connect } from 'react-redux';
import { emailChanged, nameChanged, addToWaitingList } from '../actions';
import { Card, CardSection, Input, Button, Spinner } from '../components/Auth';

class addToWaitingListForm extends Component {

  onEmailChange(text) {
    this.props.emailChanged(text);
  }

  onButtonPress() {
    const { email } = this.props;

    this.props.addToWaitingList({ email });
  }

  renderButton() {
    if (this.props.loading) {
      return <Spinner size="large" />;
    }
    return (
      <Button onPress={this.onButtonPress.bind(this)}>
        Keep me in the loop!
      </Button>
    );
  }

  render() {
    return (
        <View>
          <Card>
            <CardSection>
              <Input
                placeholder="your name"
                onChangeText={this.onNameChange.bind(this)}
                value={this.props.name}
              />
            </CardSection>

            <CardSection>
              <Input
                placeholder="email@uni.ac.uk"
                onChangeText={this.onEmailChange.bind(this)}
                value={this.props.email}
              />
            </CardSection>

            <Text style={styles.errorTextStyle}>
              {this.props.error}
            </Text>

            <CardSection style={{ borderBottomWidth: 0 }}>
              {this.renderButton()}
            </CardSection>
          </Card>
        </View>
    );
  }
}

const mapStateToProps = ({ auth }) => {
  const { email, name, error, loading } = auth;

  return { email, name, error, loading };
};

export default connect(mapStateToProps, {
  emailChanged,
  addToWaitingList
})(addToWaitingListForm);

添加这是我与 mailchimp api 交互的操作代码：

import Router from '../../navigation/Router';
import { getNavigationContext } from '../../navigation/NavigationContext';

export const addToWaitingList = ({ email }) => {
  const emailListID = 'e100c8fe03';

  fetch(`https://us13.api.mailchimp.com/3.0/lists/${emailListID}/members/`, {
    method: 'POST',
    body: JSON.stringify({
      'email_address': email,
      'status': 'subscribed',
      'merge_fields': {
        'FNAME': 'Urist',
        'LNAME': 'McVankab'
      }
    })
  })
    .then(() => addSubscriberSuccess())
    .catch(error => console.log(error));
};

const addSubscriberSuccess = () => {
  getNavigationContext().getNavigator('root').immediatelyResetStack([Router.getRoute('auth')]);
};

现在，我刚刚返回的错误是 ExceptionsManager.js:62 Cannot read property 'type' of undefined 和 Error: unsupported BodyInit type

这是什么意思，我该如何解决？

【问题讨论】：

你的body 必须是一个字符串。使用body: JSON.stringify(mybody)
我已经改了，但还是不行：/还能是什么？
你也遇到同样的错误吗？
它说ExceptionsManager.js:62 Cannot read property 'type' of undefined 并且网络请求失败
邮递员也不行

标签： react-native redux fetch mailchimp mailchimp-api-v3.0

【解决方案1】：

你需要做两件事。首先，您需要通过 fetch 发送基本身份验证，因此您不能执行“user:pass” 您必须使用 btoa('user:pass') 进行转换。

那么你必须用 mode: 'no-cors' 发送它

    let authenticationString = btoa('randomstring:ap-keyxxxxxxx-us9');
    authenticationString = "Basic " + authenticationString;

    fetch('https://us9.api.mailchimp.com/3.0/lists/111111/members', {
      mode: 'no-cors',
      method: 'POST',
      headers: {
        'authorization': authenticationString,
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        email_address: "dude@gmail.com", 
        status: "subscribed",
      })
    }).then(function(e){
        console.log("fetch finished")
    }).catch(function(e){
        console.log("fetch error");
    })

【讨论】：