响应中的axios GET请求功能导出/导入

reactjs axios

3114 观看

2回复

477 作者的声誉

我如何从单独的.js文件导出axios获取请求,以便可以通过导入ie在main.js中使用它:

import { getNewQuote }  from './api'

class App extends Component {

  constructor () {
    super();
    this.state = {
      quote: []
    }
    this.handleNewQuote = this.handleNewQuote.bind(this);
  }
  componentDidMount() {
    getNewQuote();
  }

  handleNewQuote() {
    getNewQuote();
  }
   ...

我的api.js看起来像这样:

export function getNewQuote(){
    axios.defaults.baseURL = 'https://andruxnet-random-famous-quotes.p.mashape.com';
    axios.defaults.headers.common['X-Mashape-Key'] = "MY-API-KEY";
    axios.get('/?cat=famous&count=1')
      .then(res => {
        this.setState({ quote: res.data })
      })
      .catch(error => {
        console.log(error)
      })
}

通过此设置,我在控制台中遇到错误:

TypeError:无法读取api.js:8处未定义的属性“ setState”

我认为问题在于:

axios getNewQuote导出或componentDidMount中的getNewQuote调用

有什么帮助吗?

作者: karolis2017 的来源 发布者: 2017 年 9 月 15 日

回应 2


6

119724 作者的声誉

决定

您可以从axios请求中返回promise,然后在调用函数中进行处理,例如

export function getNewQuote(){
    axios.defaults.baseURL = 'https://andruxnet-random-famous-quotes.p.mashape.com';
    axios.defaults.headers.common['X-Mashape-Key'] = "MY-API-KEY";
    return axios.get('/?cat=famous&count=1')
}

并像

componentDidMount() {
    getNewQuote().then(res => {
        this.setState({ quote: res.data })
      })
      .catch(error => {
        console.log(error)
      });
  }

  handleNewQuote() {
    getNewQuote().then(res => {
        this.setState({ quote: res.data })
      })
      .catch(error => {
        console.log(error)
      });
  }

getNewQuote使用Javascript .call方法调用该函数并将其引用传递this给它,例如

 componentDidMount() {
    getNewQuote.call(this)
  }

  handleNewQuote() {
    getNewQuote.call(this)
  }
作者: Shubham Khatri 发布者: 2017 年 9 月 15 日

3

830 作者的声誉

上面的答案是绝对正确的,但是我要集中精力编写干代码,所以这就是我的做法。

import axios from 'axios';
class BaseService {
  constructor() {
    this.baseUrl = "/api";
  }

  getData(path) {
    let url = `${this.baseUrl}${path}`;
    return axios.get(`${url}`);
  }
}

export default (new BaseService()); // singleton object

现在可以将此基本服务导入其他组件或服务。

import BaseService from './services/base.service.jsx';

class Home extends React.Component {
constructor(props) {
    super(props);

    this.state = {
        data: []
    }

}

componentDidMount() {
    let path = '/users';
    BaseService.getData(path)
        .then(resp => {
            this.setState({data: resp.data});
        }); // handle errors if needed
}
作者: jonuojha 发布者: 2017 年 9 月 15 日
32x32