前端常用的4種請求方式實例總結(jié)
一、GET請求
GET 請求用于向指定資源發(fā)出請求,請求中包含了資源的 URL 和請求參數(shù)。服務(wù)器端通過解析請求參數(shù)來返回相應(yīng)的資源,不會修改服務(wù)器端的狀態(tài)。
1.1 使用方式
使用 GET 請求方式提交的數(shù)據(jù)會被包含在 URL 中,因此易于被緩存和瀏覽器保存,但也因此不適合用于提交敏感數(shù)據(jù)。
第一種情形:
前端發(fā)送get請求,使用data方式傳遞參數(shù)。
export function empList(query){ return request({ url:'/emps/list', method:'get', data:query }) }
后端使用@GetMapping注解,不使用@RequestBody接收參數(shù)
@GetMapping("/list") public Result listEmp(Emp emp){ List<Emp> emps = empService.listEmp(emp); return Result.success(emps); }
這種方法實際接收不到前端傳遞來的參數(shù),因為get請求參數(shù)傳遞不能是data,而應(yīng)該是params。
如果把后端接收參數(shù)方式改為@RequestBody,前端不作改動,則請求會報400錯誤(請求失?。?,后端報缺失需要的請求體,也就是需要Emp參數(shù),但是前端并沒有傳送過來。
[org.springframework.http.converter.HttpMessageNotReadableException: Required request
body is missing: public cn.cjc.pojo.Result
cn.cjc.controller.EmpController.list(cn.cjc.pojo.Emp)
結(jié)論:在獲取數(shù)據(jù),即查詢數(shù)據(jù)庫的時候,使用get請求方式,使用params的方式傳遞參數(shù),或者使用url占位符的方式傳遞參數(shù)。不要在查詢操作中使用post方法。
第二種情形:
前端發(fā)送get請求,不使用data方式傳遞參數(shù)
export function selectById(id) { return request({ url: '/emps/'+id, method: 'get', }) }
后端使用@GetMapping注解,使用@PathVariable接收參數(shù)
@GetMapping("/{id}") public Result getById(@PathVariable Integer id){ log.info("根據(jù)ID查詢員工信息, id: {}",id); Emp emp = empService.getById(id); return Result.success(emp); }
結(jié)論:當(dāng)前端發(fā)起GET請求時,若傳遞的是一個對象,則后端接收數(shù)據(jù)時,不需要用@RequestBody來轉(zhuǎn)換JSON串,若傳遞的是一個具體的值或參數(shù)則后端必須用@PathVariable來接收。
1.2 優(yōu)缺點
GET 請求的優(yōu)點包括:
- 可以被緩存和瀏覽器保存。
- 對服務(wù)器性能的影響較小。
GET 請求的缺點包括:
- 不適合用于提交敏感數(shù)據(jù),以為請求參數(shù)會出現(xiàn)在URL中。
- 僅適用于對資源進行查詢操作,不能修改服務(wù)器端的狀態(tài)。
1.3 應(yīng)用場景
- 獲取資源信息。
- 對資源進行查詢操作。
二、POST請求
POST 請求用于向指定資源提交數(shù)據(jù),通常會導(dǎo)致服務(wù)器端的狀態(tài)發(fā)生變化。例如,在 Web 表單中填寫信息并提交時,就是使用 POST 請求方式將表單數(shù)據(jù)提交到服務(wù)器存儲。
使用 POST 請求方式提交的數(shù)據(jù)會被包含在請求體中,而不像 GET 請求方式那樣包含在 URL 中。因此,POST 請求可以提交比 GET 更大的數(shù)據(jù)量,并且相對更安全。
2.1 使用方式
第一種情況:
前端發(fā)送post請求,使用data方式傳遞參數(shù),傳遞的是一個對象
//POST請求,且傳遞的是一個對象 export function add(emp) { return request({ url: '/emps', method: 'post', data: emp }) }
后端使用@PostMapping注解,使用@RequestBody接收參數(shù)
@PostMapping public Result add(@RequestBody Emp emp){ empService.add(emp); return Result.success(); }
結(jié)論: POST請求,一般用于新增或登錄操作,通常傳遞為一個對象即一個JSON串,后端接收時必須使用@RequestBody注解來標(biāo)識,用data方式傳遞參數(shù)
第二種按情:
前端發(fā)送post請求,使用params方式傳遞參數(shù),傳遞的不是一個對象,而是一組參數(shù),比如登錄操作
export function login(username, password) { return request({ url: '/login', method: 'post', params: { username: username, password: password } }) }
后端使用@PostMapping注解,不使用@RequestBody
@PostMapping("/login") public Map doLogin(String username, String password) { User user = userService.selUserByName(username); Map map = new HashMap(); if (Objects.isNull(user)) { map.put("result", "no"); } else { if (Objects.equals(user.getPassword(), password)) { map.put("code", 200); map.put("result", "登錄成功"); //模擬登錄 System.out.println("登錄成功"); log.info("登錄成功"); } else { System.out.println("登錄失敗"); map.put("result", "no"); } } return map; }
結(jié)論: POST請求,一般用于新增或登錄操作,傳遞一組參數(shù)的時候,后端接收時不使用使用@RequestBody注解來標(biāo)識,用params方式傳遞參數(shù)
2.2 優(yōu)缺點
POST 請求的優(yōu)點包括:
- 可以提交比 GET 更大的數(shù)據(jù)量。
- 相對更安全,因為請求參數(shù)不會被包含在 URL 中。
POST 請求的缺點包括:
- 對服務(wù)器性能的影響較大。
- 不適用于對同一資源進行多次操作。
2.3 應(yīng)用場景
- 向服務(wù)器提交表單數(shù)據(jù)。
- 向服務(wù)器上傳文件。
- 創(chuàng)建資源或提交數(shù)據(jù)到服務(wù)器。
三、PUT請求
PUT 請求用于向服務(wù)器更新指定資源,可以理解為對服務(wù)器上的資源進行修改操作。使用 PUT 請求方式會覆蓋原有的資源內(nèi)容,因此需要謹慎使用。
3.1 使用方式
前端發(fā)送put請求,使用data方式傳遞參數(shù)
export function update(emp) { return request({ url: '/emps', method: 'put', data: emp }) }
后端使用@PutMapping注解,使用@RequestBody接收參數(shù)
@PutMapping public Result update(@RequestBody Emp emp){ empService.update(emp); return Result.success(); }
如果前端使用data傳遞參數(shù),后端不使用@RequestBody注解接收參數(shù),則接收不到前端傳遞過來的參數(shù)(對象為null)。
如果前端使用params傳遞參數(shù),后端使用@RequestBody注解接收參數(shù),則會報請求體缺失異常(請求體中需要Emp參數(shù),但是沒有)。
如果前端使用params傳遞參數(shù),后端不使用@RequestBody注解接收參數(shù),是可以接收到前端傳遞過來的參數(shù)(對象為null)。
雖然可以使用post代替put但是同樣也不建議這樣使用。
結(jié)論:當(dāng)前端發(fā)起PUT請求時,若傳遞為一個對象即一個JSON串,則后端必須用@RequestBody注解進行標(biāo)識;若傳遞參數(shù)為具體的值,后端接收時不需要任務(wù)注解進行標(biāo)識。
3.2 優(yōu)缺點
PUT 請求的優(yōu)點包括:
- 可以更新指定的資源。
PUT 請求的缺點包括:
- 對服務(wù)器性能的影響較大。
- 不適用于對同一資源進行多次操作。
3.3 應(yīng)用場景
- 更新指定的資源。
- 按照條件更新一組資源。
四、DELETE請求
DELETE 請求用于請求服務(wù)器刪除指定的資源,可以理解為對服務(wù)器上的資源進行刪除操作。使用 DELETE 方式請求會導(dǎo)致指定的資源被永久刪除,因此需要謹慎使用。
4.1 使用方式
前端使用delete請求方式,傳輸單個參數(shù),URL中設(shè)置占位符參數(shù)
//傳輸單個參數(shù) export function deleteById(id) { return request({ url: '/depts/' + id, method: 'delete' }) }
后端使用@DeleteMapping注解,@PathVariable獲取URL參數(shù)
@GetMapping("/{id}") public Region findRegion(@PathVariable Integer id) { return regionService.selectById(id); }
如果前端使用params傳遞參數(shù),后端使用@RequestParam,則前端報400(請求失敗),后端報缺少需要的參數(shù)錯誤;
前端使用data傳遞參數(shù),后端使用@RequestParam仍然不行,報相同的錯誤。
使用post請求也可以完成delete的操作,但是不支持這樣做。
結(jié)論:當(dāng)前端發(fā)起DELETE請求時,傳遞的是一個具體的值或參數(shù),后端接收參數(shù)必須用@PathVariable注解進行標(biāo)識。
4.2 優(yōu)缺點
DELETE 請求的優(yōu)點包括:
- 可以永久刪除指定的資源。
DELETE 請求的缺點包括:
- 對服務(wù)器性能的影響較大。
- 不適用于對同一資源進行多次操作。
4.3 應(yīng)用場景
- 刪除指定的資源。
- 按照條件刪除一組資源。
五.總結(jié)
主要針對于GET和POST請求:
GET拼接url,POST傳遞body,get限制字符串長度
請求緩存:GET 會被緩存,而post不會,原因是get是url的請求
收藏書簽:GET可以,而POST不能,原因是url可以收藏,
保留瀏覽器歷史記錄:GET可以,而POST不能,原因是get的url請求
用處:get常用于取回數(shù)據(jù),post用于提交數(shù)據(jù)
安全性:post比get安全,是因為post是請求體,不會在url上被劫持!
請求參數(shù):querystring是url的一部分get、post都可以帶上。
get的querystring僅支持urlencode編碼,post的參數(shù)是放在body(支持多種編碼)
請求參數(shù)長度限制:get請求限制字符串長度 ,post請求不限制字符串長度
總結(jié)
到此這篇關(guān)于前端常用的4種請求方式的文章就介紹到這了,更多相關(guān)前端常用請求方式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript自動生成包含數(shù)字與字符的隨機字符串
這篇文章主要介紹了javascript自動生成包含數(shù)字與字符的隨機字符串,涉及Math.random()和Math.floor()兩個函數(shù)的使用技巧,需要的朋友可以參考下2015-02-02JS彈出層遮罩,隱藏背景頁面滾動條細節(jié)優(yōu)化分析
下面小編就為大家?guī)硪黄狫S彈出層遮罩,隱藏背景頁面滾動條細節(jié)優(yōu)化分析。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考2016-04-04