Reactは、動的にデータを取得するという重要な機能を実現します。reactでajaxを送信するには、通常、フェッチを使用します。また、クロスドメインの問題があるため、プロキシを設定する必要があります。
1.フェッチパッケージのインストール:
プロジェクトフォルダのコマンドウィンドウに次のコードを入力します。
yarn add isomorphic-fetch
2.パッケージajax:
プロジェクトのsrcフォルダーの下にutilsという名前の新しいフォルダーを作成し、utilsに新しいhttp.jsファイルを作成します。また、export defaultを使用して、カプセル化された関数をエクスポートします。必要なページでインポートして使用すると非常に便利です。
import fetch from 'isomorphic-fetch';
function http(url, options={}) {
// 告知服务器通过body节点携带的数据,按json字符串格式来理解和使用
options.headers = {
"Content-Type": "application/json",
"Authorization": sessionStorage.getItem("token")
};
// 将调用http方法配置body携带的数据进行json字符串化
if(options.body) options.body = JSON.stringify(options.body);
return fetch(url, options)
// 第一个then拿到的是fetch返回的结果,并不一定是服务器返回的结果
.then(response => {
if(response.status === 200) return response;
else throw new Error(response.statusText);
})
.then(response => response.json())
.then(({ code, data, msg }) => {
switch(code) {
case 200: return data;
case 401:
case 404:
case 199:
case 500:
default:
throw new Error(msg);
}
})
.catch(error => {
alert(error.message);
// 返回一个永远是pending的Promise对象
return new Promise(() => {});
})
}
export default http;
3.プロキシを設定します。
package.jsonにプロキシを設定して、クロスドメインの問題を解決できます。
"proxy": "http://localhost:3000/"
ポート番号を変更することもできます。
"scripts": {
"start": "set PORT=8888&&react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
4. ajaxを送信します:
import http from '../../utils/http.js'; // 导入http
// class中
async componentDidMount() {
// 组件挂载完毕
let listMain = await http("/category/list/0");
let listSub = await http("/category/list/1");
this.setState({ listMain, listSub, activeId: 1 });
}
上記はajaxパッケージとその使用法、およびクロスドメインの問題を解決する方法です。ajaxを使用すると、データを動的に取得できます。