Vue向后端傳數(shù)據(jù)后端接收為null問題及解決

更新時(shí)間：2022年09月07日 09:52:23 投稿：jingxian

這篇文章主要介紹了Vue向后端傳數(shù)據(jù)后端接收為null問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

Vue向后端傳數(shù)據(jù)后端接收為null

由于axios默認(rèn)發(fā)送數(shù)據(jù)時(shí)，數(shù)據(jù)格式是Request Payload，而并非我們常用的Form Data格式，后端數(shù)據(jù)就為null，所以在發(fā)送之前，需要使用qs模塊對其進(jìn)行處理。

他們的格式

Request Payload：http://localhost:8080/login?zh=123,pw=123
Form Data:http://localhost:8080/login,{zh=“123”,pw=“123”}

安裝qs

npm install qs

mian.js中添加

import qs from 'qs'      //引入qs
Vue.prototype.$qs = qs

vue請求

axios.post('http://localhost:8080/manage/doctor/login.do',
		this.$qs.stringify({
		doctorName:this.form.username,
			password:this.form.password,
			// test:3,
		}) 
		)
		.then(response=>{
			 console.log(response);
		})
		//獲取失敗
		.catch(error=>{
			  console.log(error);
			  alert('網(wǎng)絡(luò)錯(cuò)誤，不能訪問');
		})

我的后端用的java，給你們看下效果圖吧：

Vue捕獲后端拋出異常

修改vue項(xiàng)目中 src/utils/request.js中 service.interceptors.response.use內(nèi)容

設(shè)置前

設(shè)置后

service.interceptors.response.use(
  (response) => {
    loadingInstance &&
      setTimeout(function () {
        loadingInstance.close()
      }, 500)
    const res = response.data
    return res
  },
  (error) => {
    loadingInstance &&
      setTimeout(function () {
        loadingInstance.close()
      }, 500)

    if (error && error.response) {
      var { status, data } = error.response
      if (status === 401 || status === 403) {
        if (!loginInstance && whiteRoutes.indexOf(requestUrl) === -1) {
          loginInstance = MessageBox.confirm('登錄超時(shí)請重新登錄', '重新登錄', {
            confirmButtonText: '好的',
            type: 'warning'
          })
            .then(() => {
              loginInstance = null
              store.dispatch('user/resetToken').then(() => {
                location.reload()
              })
            })
            .catch(() => {
              loginInstance = null
            })
        }
      } else {
        if (data) {
          Message({
            message: data,
            type: 'error',
            duration: 5 * 1000
          })
        } else {
          Message({
            message: data.message || '服務(wù)器異常，請稍后再試或聯(lián)系管理員',
            type: 'error',
            duration: 5 * 1000
          })
        }

      }
    } else {
      Message({
        message: '服務(wù)器異常，請稍后再試或聯(lián)系管理員',
        type: 'error',
        duration: 5 * 1000
      })
    }

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: