iT邦幫忙

1

react使用 web api 如何傳參數?

sion 2019-10-20 21:49:331875 瀏覽
  • 分享至 

  • xImage

各位大大好,最近有興趣自學一下前端,
但在呼叫web api時卡住了,
想請教我該如何傳遞參數呢?
看了幾篇教學是放在body裡,但我後端還是收不到。
我該如何修正呢?

react部分

async Validate(a, b ) {

        const response = await fetch('LogInfo', {
            method: "post", 
            headers: {
                "Content-Type": "application/json; charset=utf-8",
            },
            body: JSON.stringify({ username: a, password: b })
        });
        const data = await response.json();
        this.setState({ isAuthenticate: data });
    }

後端部分

[HttpPost]
        public bool Authenticate(string username, string password)
        {
            if (username == "abc" && password == "123456") 
            {
                return true;
            }
            return false;
        }
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

2
dragonH
iT邦超人 5 級 ‧ 2019-10-20 22:33:53
最佳解答

這應該跟 react 沒啥關係

釐清一下你的情況

你是

1 .

有 丟 http request 到後端, 但是拿不到你要的值

你的 fetch 寫法看起來沒啥問題

也確實能 post

codepen

後端也確實能收到

所以問題應該會在你的後端

2 .

無法丟出 http request, browser console network 也看不到

你是怎麼呼叫你的 Validate 的呢

看更多先前的回應...收起先前的回應...
sion iT邦新手 4 級 ‧ 2019-10-21 09:14:40 檢舉

在觸發onsubmit的時候

 handleSubmit(e) {
        e.preventDefault();

        const { username, password, isAuthenticate } = this.state;

        this.Validate(username, password);//呼叫API
        if (isAuthenticate) {
            alert("login");
        }
        
    }

我看參數確實有傳進去,但後端還是收不到

froce iT邦大師 1 級 ‧ 2019-10-21 09:30:30 檢舉

後端收不到你瀏覽器有按F12看網路那邊送了什麼出去嗎?

dragonH iT邦超人 5 級 ‧ 2019-10-21 09:55:20 檢舉

sion

後端收不到你瀏覽器有按F12看網路那邊送了什麼出去嗎?

froce大 說的這個才是重點

然後我可以弱弱的問一下

為什麼後端 api route 是 Authenticate

fetch 卻是 post 到 LogInfo

(不熟 .net 不要罵我 /images/emoticon/emoticon48.gif

sion iT邦新手 4 級 ‧ 2019-10-21 10:11:35 檢舉

https://ithelp.ithome.com.tw/upload/images/20191021/20117695te9ditSti8.png
小弟資質愚昧看不出甚麼問題

dragonH 後端有設Route

dragonH iT邦超人 5 級 ‧ 2019-10-21 10:14:43 檢舉

sion

你的圖需要在往下一點

例如這樣

img

重點會在 request payload

sion iT邦新手 4 級 ‧ 2019-10-21 10:21:41 檢舉

跟你的結果一樣

dragonH iT邦超人 5 級 ‧ 2019-10-21 10:24:32 檢舉

sion

好的

那我想這鍋應該就不在前端了

如果有辦法把整個 request object 拿出來看

或許會有幫助

另外

我剛用 .net core mvc 測

https://ithelp.ithome.com.tw/upload/images/20191021/20117259WT9IGpSIL4.png

需要這樣才能收到值

不知道這個會不會有幫助就是

sion iT邦新手 4 級 ‧ 2019-10-21 10:32:39 檢舉

我昨天有下FromBody,但編譯錯誤就沒深究了/images/emoticon/emoticon01.gif
看來應該是startup有問題,我再研究

dragonH iT邦超人 5 級 ‧ 2019-10-21 10:34:48 檢舉

/images/emoticon/emoticon42.gif

froce iT邦大師 1 級 ‧ 2019-10-21 10:50:02 檢舉

等一下,response呢?
前面看header是沒問題沒錯,也傳200回來。

froce iT邦大師 1 級 ‧ 2019-10-21 10:55:47 檢舉

然後我看你都直接傳回true/false
我是不熟.net(M$的程式語言、工具我都不熟),但是通常要回傳的應該不會是語言內的boolean物件吧?而會是包裝過的response物件或是status code。

sion iT邦新手 4 級 ‧ 2019-10-21 11:14:58 檢舉

froce
我是想把資料丟到後端去查詢DB,然後回傳結果,
就這個案例回傳boolean應該沒問題吧?

sion iT邦新手 4 級 ‧ 2019-10-21 11:22:48 檢舉

dragonH
我剛試了出來,好像需要把所有參數包成一個物件傳呢
/images/emoticon/emoticon06.gif

dragonH iT邦超人 5 級 ‧ 2019-10-21 11:27:26 檢舉

sion

我剛試了出來,好像需要把所有參數包成一個物件傳呢

我只記得 .net 好像沒辦法像 nodejs 或 python

那樣直接用 /images/emoticon/emoticon07.gif

就這個案例回傳boolean應該沒問題吧?

可以的話還是回傳 status code + json object

會比較好

畢竟前端接的是 js

不過我不知道 .net 要如何實現就是

froce iT邦大師 1 級 ‧ 2019-10-21 11:53:13 檢舉

...所以就像我說的一樣,是你的後端return的問題?

froce iT邦大師 1 級 ‧ 2019-10-21 11:56:25 檢舉

我只記得 .net 好像沒辦法像 nodejs 或 python

python也沒辦法直接傳啊,只是框架像flask是背後幫你做掉了,用裝飾子的方式,把string轉成JSON或HTTP response做掉。

小魚 iT邦大師 1 級 ‧ 2019-10-21 12:11:26 檢舉

不管什麼語言,前端應該都是一樣的

小魚 iT邦大師 1 級 ‧ 2019-10-21 12:11:26 檢舉

不管什麼語言,前端應該都是一樣的

dragonH iT邦超人 5 級 ‧ 2019-10-21 13:04:41 檢舉

/images/emoticon/emoticon12.gif

sion iT邦新手 4 級 ‧ 2019-10-21 13:45:15 檢舉

看來問題是我不了解.net core呢
core的web API跟.net MVC不太一樣/images/emoticon/emoticon10.gif
[Day12] ASP.NET Core 2 系列 - REST-Like API

1
小魚
iT邦大師 1 級 ‧ 2019-10-20 22:31:10

不是data裡面嗎?
之前用vue好像是用formdata傳資料.

dragonH iT邦超人 5 級 ‧ 2019-10-20 22:39:38 檢舉

不是data裡面嗎?
之前用vue好像是用formdata傳資料.

data 是 axios 或是 jquery 的吧 XD/images/emoticon/emoticon37.gif

小魚 iT邦大師 1 級 ‧ 2019-10-21 00:31:34 檢舉

dragonH
喔喔,
原來是這樣子的啊.
果然我只是兼做前端的而已.
/images/emoticon/emoticon39.gif

dragonH iT邦超人 5 級 ‧ 2019-10-21 09:06:25 檢舉

/images/emoticon/emoticon26.gif

我要發表回答

立即登入回答