一、React ajax

了解

React 本身只關(guān)注于界面，并不包含發(fā)送 ajax 請求的代碼

前端應(yīng)用需要通過 ajax 請求與后臺進(jìn)行交互（json 數(shù)據(jù)）

react 應(yīng)用中需要集成第三方 ajax 庫（或自己封裝）

常用的 ajax 請求庫

1、jQuery：比較重，如果需要另外引入不建議使用

2、axios：輕量級，建議使用

封裝 XmlHttpRequest 對象的 ajax，promise 風(fēng)格，可以用在瀏覽器端和 node 服務(wù)器端。

文檔：https://github.com/axios/axios

安裝：$ npm install axios

二、react 腳手架配置代理總結(jié)

React 項目啟動以后，運行到本地 3000 端口，地址為 http://localhost:3000

請求 api 接口，接口地址為 http://localhost:5000/students | http://localhost:5001/cars

瀏覽器發(fā)起 ajax 請求時，會存在跨域問題

方式一

在 package.json 中追加如下配置

"proxy": "http://localhost:5000"

請求地址修改為：http://localhost:3000/students （先請求本地3000端口下的代理，通過代理轉(zhuǎn)發(fā)請求到5000端口，代理再將服務(wù)端返回數(shù)據(jù)轉(zhuǎn)發(fā)回來）

axios.get('http://localhost:3000/students')

說明：

1、優(yōu)點：配置簡單，前端請求資源時可以不加任何前綴。
2、缺點：不能配置多個代理。
3、工作方式：上述方式配置代理，當(dāng)請求了 3000 不存在的資源時，那么該請求會轉(zhuǎn)發(fā)給5000 （優(yōu)先匹配前端資源 public 目錄下）

方法二

第一步：創(chuàng)建代理配置文件

在src下創(chuàng)建配置文件：src/setupProxy.js

第二步：編寫 setupProxy.js 配置具體代理規(guī)則

// 配置代理中間件，以進(jìn)行連接、表達(dá)、瀏覽器同步等。
const { createProxyMiddleware } = require('http-proxy-middleware')

// 配置代理服務(wù)
const apiProxy = createProxyMiddleware('/api1', { // api1 是需要轉(zhuǎn)發(fā)的請求(所有帶有/api1前綴的請求都會轉(zhuǎn)發(fā)給5000)
	target: 'http://localhost:5000', // 配置轉(zhuǎn)發(fā)目標(biāo)地址(能返回數(shù)據(jù)的服務(wù)器地址)
	changeOrigin: true, // 控制服務(wù)器收到的請求頭中Host的值
	pathRewrite: { // 重寫請求路徑(必須)，去除請求前綴，保證交給后臺服務(wù)器的是正常請求地址
		'^/api1': ''
	}
})

const apiProxy2 = createProxyMiddleware('/api2', {
	target: 'http://localhost:5001',
	changeOrigin: true,
	pathRewrite: {
		'^/api2': ''
	}
})

module.exports = function(app) {
	app.use(apiProxy)
	app.use(apiProxy2)
}

說明：

1、優(yōu)點：可以配置多個代理，可以靈活的控制請求是否走代理。

2、缺點：配置繁瑣，前端請求資源時必須加前綴。

三、消息訂閱-發(fā)布機制

實現(xiàn)兄弟組件間通信

1、工具庫：PubSubJS

2、下載: npm install pubsub-js --save

3、使用:

import PubSub from 'pubsub-js' // 引入
PubSub.subscribe('delete', function(msg, data){ }) // 訂閱
PubSub.publish('delete', data) // 發(fā)布消息
PubSub.unsubscribe() // 取消訂閱（類似于定時器timer）

四、擴展 Fetch

1、文檔：

https://github.github.io/fetch/

https://segmentfault.com/a/1190000003810652

2、特點

fetch：原生函數(shù)，不再使用 XmlHttpRequest 對象提交 ajax 請求，支持 promise

老版本瀏覽器可能不支持文章來源地址http://www.zghlxwxcb.cn/news/detail-724518.html

到了這里，關(guān)于【12】基礎(chǔ)知識：React ajax的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！