前端常見的請求資料彙總（GET POST）

快跑啊小盧發表於2021-04-02
前端

前端在請求介面的時候要和後端人員配合好，根據後端提供的介面文件來進行開發，一般請求型別有這幾種

1.GET請求

  • GET請求一般會將資料放到URL後
  • GET請求對所發資訊量的限制是2000個字元
  • GET請求的引數只能是ASCII碼，所以中文需要URL編碼
  • GET請求用於提交非敏感資料和小資料

前端在使用GET請求的時候一般是為了查詢資料等操作，這時會把引數放在位址列後面一起傳過去所以請求頭如果對token等沒有特殊要求的情況下一般是不用設定的

例如：

// 查詢課時列表方法
export function getClassHour (params) {
    return request({
        url: API.classHourList,
        method: 'get',
        params
        })
}
// 獲取課時列表
      const params = {
        curricid: this.queryParam.curricid,
        pageNow: this.queryParam.pageNow,
        pageSize: this.queryParam.pageSize
      }

      getClassHour(params).then(res => {
        //獲取資料後的操作
        }
      )

而最終請求的效果是這樣的

2.POST請求

  • POST請求會將資料放到請求體中
  • POST請求對資訊量沒有限制
  • POST請求傳參沒有資料編碼這個限制
  • POST請求用於提交敏感資料和大資料

前端在使用POST請求的時候一般是為了傳輸敏感資料引數，所以不會放在位址列後面。

在使用POST請求的時候要和後端人員配合好，根據後端所要求的格式來傳輸引數，不同的格式有不同的請求頭設定。

 

　　1、json字串：application/json//axios的預設的資料型別

  

 

 　　類似這種POST請求一般是傳json字串然後請求頭設定為application/json

　　例如：

//在攔截器設定請求頭
config.headers['Content-Type'] = 'application/json'
// 新增課程
export function addClass (data) {
    return request({
        url: API.addClass,
        method: 'post',
        data: data
    })
}
//新增課程操作
//this.form是引數
addClass(this.form).then(response => {
                    this.$message.success(
                      '新增成功',
                      3
                    )
                  }).catch(err => {
                      console.log(err)this.$message.error('錯誤')
                    })

實際請求效果如下：

 

 

 可以發現 引數是以物件的格式傳送的

　　2、表單（鍵值對型別）：application/x-www-form-urlencoded

 

 

 　　類似這種POST請求一般是傳表單然後請求頭設定為application/x-www-form-urlencoded

        用Qs.stringify()將物件序列化成URL的形式，Qs是axios裡面自帶的，所以直接引入就可以了

　　例如

 

  //在攔截器設定請求頭
　　config.headers['Content-Type'] = 'multipart/form-data'

 

service.post(url, qs.stringify(data, {arrayFormat: 'indices', allowDots: true}))
        .then((res) => {
          if (res) {
            console.log(res)
            resolve(res.data)
          } else {
            resolve(res)
          }
        })
        .catch((err) => {
          reject(err)
        })
//data為引數

實際請求效果如下：

以上就是前端GET請求和POST請求基本的型別

為何要設定請求頭裡的'Content-Type'：

我們使用不同請求方式時，引數的傳輸方式是不一樣的，但是服務端在取我們介面的請求引數時，用的方法其實卻是一樣的，都是使用request.getParameter(key)來獲取，其實是因為tomcat在中間會對請求引數進行解析處理，處理完把解析出來的表單引數放在request parameter map中，所以後端就可以通過request.getParameter(key)來統一獲取資料，而tomcat解析的時候是怎麼知道當前的請求是post請求的呢，就是通過'contentType'，當'contentType'為"application/x-www-form-urlencoded",它才會去讀取請求體資料。

為何要用Qs.stringify()將物件序列化成URL的形式：

在最開始的時候我們說了，post請求引數是以鍵值對的形式存在請求體裡，用Qs.stringify()就是把傳入的物件轉換為鍵值對。

最後在vue裡用axios的時候，針對post請求的問題可以做一個全域性的設定，避免每個請求都要設定一遍太麻煩

 

總的來說

　　前端在平時開發中要嚴格按照介面文件需要傳的引數格式和欄位來和後端進行配合，如果發現有什麼不合理的地方要及時跟後端同事進行溝通，不要不敢說，不然最後卡住的會是自己，如果不確認自己寫的是否正確而後端同事說介面沒有問題的時候可以在Postman進行介面測試，如果確實是可以用的說明是自己寫的程式碼有問題，這時候仔細把請求頭和格式對比清楚就可以了。

 

相關文章