用Typescript

时间:2019-02-24 19:09:19

标签: reactjs typescript oboe.js

我有这个提取呼叫:

 api<T>(url: string, headers: Request): Promise<T> {
        return fetch(url, headers)
            .then(response => {
                if (!response.ok) {
                    throw new Error(response.statusText);
                }
                return response.json().then(data => data as T);
            })
            .catch((error: Error) => {
                throw error;
            });
    }
    componentDidMount(){
        this.api<Array<Response>>(url, requestData)
            .then(data  => {
                this.setState({
                    jobs: data
                });
            })
            .catch(error => {
                console.error(error);
            });
    }

但是我得到的响应是stream + json,所以我在.json()处获得了无效的json。

我看到有一个可以帮助我的图书馆:http://oboejs.com/examples

但是我在使用双簧管和打字稿(初学者)(使用https://www.npmjs.com/package/@types/oboe)时遇到了问题。

我尝试过:

api<T>(headers: Request): Oboe<T> {
        return oboe(headers)
            .done(function(response) {
                return response;
            })
            .fail(function(error: Error) {
                throw error;
            });
    }
    componentDidMount(){
        this.api<Array<Response>>(requestData)
            .done(data  => {
                this.setState({
                    jobs: data
                });
            })
            .fail(error => {
                console.error(error);
            });
    }

但是有明显的错误,因为我不知道双簧管应该返回哪种类型,所以我得到一个错误Oboe is not generic

1 个答案:

答案 0 :(得分:2)

  • 该错误表示Oboe类/类型不是通用的。例如,例如Number中的String
  • Oboe's docs看来oboe(param).done()进行了回调
  • 您可以将该呼叫转换为Promise,然后按照以前的方式进行其余操作

Promise代替回调逻辑

api<T>(headers: Request): Promise<T> {
  return new Promise((resolve, reject) => {
    oboe(headers)
      .done(data => resolve(data))
      .fail(err => reject(err));
  });
}

调用它(您使用Promise/fetch的方式)

componentDidMount(){
    this.api<Array<Response>>(url, requestData)
        .then(data  => {
            this.setState({
                jobs: data
            });
        })
        .catch(error => {
            console.error(error);
        });
}