axios库创建了一个Promise()对象。Promise是JavaScript ES6中的内置对象。当使用new关键字实例化此对象时,它将函数作为参数。这个单一的函数又接受两个参数,每个参数也是一个函数——resolve和reject。
Promise执行客户端代码,并且由于JavaScript异步流的“酷”特性,可能会最终解决其中一件或两件事情,即该解决(通常被认为是Promise成功的语义等效)或拒绝(广泛认为是错误的解决)。例如,我们可以保留对某个Promise对象的引用,该对象包括将“最终”返回响应对象的函数(将包含在Promise对象中)。因此,我们可以使用这样的Promise的一种方式是等待承诺解决为“某种响应”。
您可能会提出,我们不希望等待API返回调用数秒钟!我们希望我们的UI能够在等待API响应的同时做一些事情。否则,我们的用户界面将非常缓慢。那么我们如何解决这个问题?
好吧,Promise是“异步”的。在执行JavaScript代码的引擎的标准实现中(比如Node或常见的浏览器),它将在另一个进程中解析,而我们无法预先知道Promise的结果。通常的策略是将我们的函数(即类的React setState函数)发送到Promise,根据某种条件(取决于我们选择的库)进行解析。这将导致基于Promise解决方案更新本地JavaScript对象。因此,您可以将函数想象为您可能向异步方法“发送”的获取器和设置器(在传统的OOP中)。
我将在这个例子中使用Fetch,以便您可以尝试理解Promise中发生的事情,并查看是否可以在axios代码中复制我的思路。Fetch基本上类似于axios,但没有内置的JSON转换,并具有不同的解决Promise的流程(您应该参考axios文档来学习)。
GetCache.js
const base_endpoint = BaseEndpoint + "cache/";
export default (selection, date, callback) => {
fetch(base_endpoint + selection + "/" + date)
.then(res => {
if (res.status >= 400 && res.status < 600) {
throw new Error("Bad response");
}
if (!res.headers.get("content-type").includes("application/json")) {
throw new TypeError("Response not JSON");
}
return res.json();
})
.then(data => {
callback(data);
})
.catch(err => console.error(err));
};
现在我们已经编写好了 GetCache 方法,让我们看一下如何更新 React 组件的状态,以示例为例...
某些 React 组件.jsx
resolveData() {
const { mySelection, date } = this.state;
const setData = data => {
this.setState({
data: data,
loading: false
});
};
GetCache("mySelelection", date, setData);
}
最终,你并不是像返回数据那样去做,我是说你可以这么做,但更符合惯用法的方式是改变你的思考方式... 现在我们正在向异步方法发送数据。
愉快地编码吧!