React網路請求fetch之post請求

本節介紹下react下fetch的post請求

（1）編寫服務端**

/*

載入express模組
*/var express = require('
express')
/*載入path路徑處理核心模組
*/var path = require('
path')
/*載入body-parser中介軟體
*/var bodyparser = require('
body-parser')
/**/
/*定義埠號
*/var port = 3888
/*開放靜態資源，開發時建議使用「動態絕對路徑」
path核心模組+__driname非模組成員*/'
/public
',express.static(path.join(__dirname,'
./public
')))
/*配置模板引擎
*//*
1、定義當前應用使用的模板引擎。引數1：模板引擎名稱，同時也是模板檔案的字尾；引數2：用於解析處理模板內容的「方法」*/'
html
', require('
express-art-template
'));
/*2、設定模板檔案存放目錄。引數1：必須是views；引數2：views目錄路徑
*/set('
views
','./public/views')
/*3、註冊模板引擎，將之前定義的模板引擎配置到應用中。
引數1：必須是view engine；引數2：必須是第1步裡定義的模板引擎名稱即html
*/set('
view engine
','html')
/*body-parser中介軟體配置
*/true
}))get('
/login
',function(req,res))
'/login
',function(req,res))
/*監聽埠並啟動
*/ console.log(
'server is running at port
'+port)
})

（2）編寫元件模板**

然後編寫fetch請求，如下所示

完整**如下所示

import react, from

'react
'class
fetchpost extends component 
}handleusername(
event))}
handlepwd(
event))}
handlesubmit(
event
), body:`username=$&pwd=$`
}).then((response)=>).then((data)=>).
catch
(function(error))
}render()
}export 
default fetchpost

服務端輸出如下所示

此時便可以通過fetch傳送post請求，完成互動

（3）解決跨域

此時雖然可以正常獲取，但是存在跨域問題，所以加下來編寫後台**，解決跨域問題

此時便可以解決跨域，接下來在前端做出對應處理即可　　

完整**如下：

/*

載入express模組
*/var express = require('
express')
/*載入path路徑處理核心模組
*/var path = require('
path')
/*載入body-parser中介軟體
*/var bodyparser = require('
body-parser')
/**/
/*定義埠號
*/var port = 3888
/*開放靜態資源，開發時建議使用「動態絕對路徑」
path核心模組+__driname非模組成員*/'
/public
',express.static(path.join(__dirname,'
./public
')))
/*配置模板引擎
*//*
1、定義當前應用使用的模板引擎。引數1：模板引擎名稱，同時也是模板檔案的字尾；引數2：用於解析處理模板內容的「方法」*/'
html
', require('
express-art-template
'));
/*2、設定模板檔案存放目錄。引數1：必須是views；引數2：views目錄路徑
*/set('
views
','./public/views')
/*3、註冊模板引擎，將之前定義的模板引擎配置到應用中。
引數1：必須是view engine；引數2：必須是第1步裡定義的模板引擎名稱即html
*/set('
view engine
','html')
/*body-parser中介軟體配置
*/true
}))get('
/login
',function(req,res))
'/login
',function(req,res))
}})/*
監聽埠並啟動
*/ console.log(
'server is running at port
'+port)
})

React 使用 fetch 請求天氣

中國天氣網 提供了查詢天氣的 api，通過傳入城市 id，可以獲得當前城市的天氣資訊，api 相關資訊如下 規格 描述 主機位址 訪問方法 get路徑 data cityinfo html 返回結果 json 格式，包含 city temp1 temp2 weather等資訊 返回結果格式如下 在請...

React中Fetch之cors跨域請求的使用

本篇文章主要介紹了react中fetch之cors跨域請求的實現方法，寫的十分的全面細緻，具有一定的參考價值，對此有需要的朋友可以參考學習下。如有不足之處，歡迎批評指正。專案中使用了react，當中需要使用fetch來代替ajax。後端部分我使用了phalcon。由於前後端分離，為了方便，我嘗試在n...

React 實現fetch取消 中止請求

專案 ant.design pro umijs dva 新建乙個abortdispath.js檔案 export const abortdispatch payload,dispatch const cancellation newpromise reject return promise.race...