export function login(account, password, orgType) {
  return request({
    url: '/webapi/login',
    method: 'post',
    data: {"loginId":account,"password":password,"orgType":orgType}
)}

則會轉成json格式放入請求體中

如果后端中想這樣接收，是接收不到的，因為此時后端的接收格式是application/x-www-form-urlencoded

@PostMapping(value = "/login")
public Result login(String loginId, String password, int orgType, HttpServletResponse response){
}

如果我們使用data傳參，但后端不想使用@RequesBody的方式來接收，那怎么處理呢？

首先要設置請求頭

headers: {
    //關鍵
    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
}

直接拼接成k=v

適用參數較少的情況

export function login(account, password, orgType) {return request({
    url: '/webapi/login',
    method: 'post',
    data: "loginId="+account+ "&password="+password+"&orgType="+orgType
  })
}

使用qs實現 json 對象的 k=v 格式化

適用參數較多的情況

安裝qs ： npm install qs

import qs form 'qs'

export function login(account, password, orgType) {
  return request({
    url: '/webapi/login',
    method: 'post',
    data: qs.stringify({"loginId":account, "password":password,"orgType":orgType})
  })
}

這樣后端就可以這樣接收了：

@PostMapping(value = "/login")
public Result login(String loginId, String password, int orgType, HttpServletResponse response){
}

封裝axios

設置request攔截器，可以在這里添加token，這樣每次發(fā)起請求時都會攜帶token了

設置響應攔截器，根據后端的狀態(tài)碼進行相應處理，比如但發(fā)現token失效后，就跳轉到登錄頁面等

import axios from 'axios'
import { Notification, MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
import errorCode from '@/utils/errorCode'

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 創(chuàng)建axios實例
const service = axios.create({
  // axios中請求配置有baseURL選項，表示請求URL公共部分
  baseURL: "http://localhost:8082",
  // 超時
  timeout: 10000
})
// request攔截器
service.interceptors.request.use(config => {
  // 是否需要設置 token
  const isToken = (config.headers || {}).isToken === false
  if (getToken() && !isToken) {
    config.headers['Authorization'] = 'Bearer ' + getToken() // 讓每個請求攜帶自定義token 請根據實際情況自行修改
  }
  return config
}, error => {
    console.log(error)
    Promise.reject(error)
})

// 響應攔截器
service.interceptors.response.use(res => {
    // 未設置狀態(tài)碼則默認成功狀態(tài)
    const code = res.data.code || 200;
    // 獲取錯誤信息
    const msg = errorCode[code] || res.data.msg || errorCode['default']
    if (code === 401) {
      MessageBox.confirm('登錄狀態(tài)已過期，您可以繼續(xù)留在該頁面，或者重新登錄', '系統(tǒng)提示', {
          confirmButtonText: '重新登錄',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        store.dispatch('LogOut').then(() => {
          location.href = '/index';
        })
      }).catch(() => {});
    } else if (code === 500) {
      Message({
        message: msg,
        type: 'error'
      })
      return Promise.reject(new Error(msg))
    } else if (code !== 200) {
      Notification.error({
        title: msg
      })
      return Promise.reject('error')
    } else {
      return res.data
    }
  },
  error => {
    console.log('err' + error)
    let { message } = error;
    if (message == "Network Error") {
      message = "后端接口連接異常";
    }
    else if (message.includes("timeout")) {
      message = "系統(tǒng)接口請求超時";
    }
    else if (message.includes("Request failed with status code")) {
      message = "系統(tǒng)接口" + message.substr(message.length - 3) + "異常";
    }
    Message({
      message: message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

使用

import request from './request'

export function apiLogin(data){
    return request({
        url:'/user/login',
        method:'post',
        data:data
    })
}

參考鏈接：http://www.dbjr.com.cn/article/237137.htm