同一个项目中灵活运用 application/json 和 application/x-www-form-urlencoded

配合axios,同时配置loading

‘use strict‘

import axios from ‘axios‘
// import qs from ‘qs‘
import { Notification} from ‘element-ui‘  //使用elementui的提示显示
import { Loading } from ‘element-ui‘
import router from "../router";

let loading

function startLoading() {
  loading = Loading.service({
    lock: true,
    text: ‘加载中……‘,
    background: ‘rgba(0, 0, 0, 0.2)‘,
  })
}

function endLoading() {
  loading.close()
}

let needLoadingRequestCount = 0
export function showFullScreenLoading() {
  if (needLoadingRequestCount === 0) {
    startLoading()
  }
  needLoadingRequestCount++
}

export function tryHideFullScreenLoading() {
  if (needLoadingRequestCount <= 0) return
  needLoadingRequestCount--
  if (needLoadingRequestCount === 0) {
    // setTimeout(()=>{
    endLoading()
    // },1000)
  }
}
axios.interceptors.request.use(config => {
  showFullScreenLoading()
  return config
}, err => {
  return Promise.resolve(err)
})

axios.interceptors.response.use(response => {
  tryHideFullScreenLoading()
  if (response) {
    switch (response.data.code) {
      case 4011: //与后台约定登录失效的返回码,根据实际情况处理
        sessionStorage.removeItem(‘‘);
        sessionStorage.removeItem(‘‘);
        router.replace({
          path: ‘/‘
        })
    }
  }
  return response
}, err => {
  return Promise.resolve(err)
})


let base = ‘‘    // 接口地址

export const postRequest = (url, params,Func,isJson) => {   //url: 接口名 ，params: 参数 ，Func: 直接取得内容data，isJson:决定取哪种格式
  request(url, params,‘post‘,Func,isJson)
}
export const request = (url, params,method,Func,isJson) => {
  axios({
    method: method,
    url: `${base}${url}`,
    data: params,
    timeout: 6000,
    // 格式的转化
    transformRequest: [function (data) {     
      let ret = ‘‘
      for (let it in data) {
        if(isJson === 1 ){
          ret =  data[it]
        }else{
          ret += encodeURIComponent(it) + ‘=‘ + encodeURIComponent(data[it]) + ‘&‘
        }
      }
      return ret
    }],
   
    // 请求头携带信息，类型默认为form,键值模式，传参为1
    headers: {
      ‘Content-Type‘:  isJson === 1 ? ‘application/json‘ : ‘application/x-www-form-urlencoded‘,
      ‘authorization‘: sessionStorage.getItem(‘‘),
      ‘token‘: sessionStorage.getItem(‘token‘)
    }
  }).then(data=>{
    if (data.data.code === 200) {
      Func(data.data.data)
    }else if(data.data.code === 406){
      Notification.info({
        title: ‘错误‘,
        message: data.data.message
      })
    }else if(data.data.code === 4011){
      sessionStorage.removeItem(‘‘);
      sessionStorage.removeItem(‘‘);
      // window.location.href = ‘/‘
    }else if(data.data.code === 4012){
      request(‘‘,{
        ‘authorization‘: sessionStorage.getItem(‘‘),
        ‘refresh_token‘: sessionStorage.getItem(‘‘)
      },‘post‘,(res)=>{
        //缓存新的token
        console.log(res)
        let token = res.token;
        sessionStorage.setItem("token", token);
        request(url, params,method,Func);
      });

    }else if(data.data.code === 400 || data.data.code === 505 || data.data.code === 404|| data.data.code === 500){
      Notification.error({
        title: ‘错误‘,
        message: ‘网络异常‘
      })
    }else{
      Func1(data.data.code,data.data.message);
    }
  })
}
export const uploadFileRequest = (url, params) => {
  return axios({
    method: ‘post‘,
    url: `${base}${url}`,
    data: params,
    headers: {
      ‘Content-Type‘: ‘multipart/form-data‘,     //上传文件的传输格式
      ‘authorization‘: sessionStorage.getItem(‘userName‘),
      ‘token‘: sessionStorage.getItem(‘token‘)
    }
  })
}

// 方式1，
export const getRequest = (url, params,Func,isJson) => {
  request(url, params,‘get‘,Func,isJson)
}

// 方式2
export const getRequest = (url,params,Func) => {
  return axios({
    method: ‘get‘,
    url: `${base}${url}`,
    headers: {
      ‘Content-Type‘: ‘multipart/form-data‘,
      ‘authorization‘:sessionStorage.getItem(‘‘),
      ‘token‘:sessionStorage.getItem(‘token‘)
    }
  }).then(data=>{
    if (data.data.code === 200) {
      Func(data.data.data)
    }
  })
}

1. application/x-www-form-urlencoded
   在Form元素的语法中，EncType表明提交数据的格式 用 Enctype 属性指定将数据回发到服务器时浏览器使用的编码类型。 下边是说明： application/x-www-form-urlencoded： 窗体数据被编码为名称/值对。这是标准的编码格式。 multipart/form-data： 窗体数据被编码为一条消息，页上的每个控件对应消息中的一个部分。 text/plain： 窗体数据以纯文本形式进行编码，其中不含任何控件或格式字符。
   补充
   form的enctype属性为编码方式，常用有两种：application/x-www-form-urlencoded和multipart/form-data，默认为application/x-www-form-urlencoded。 当action为get时候，浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串（name1=value1&name2=value2…），然后把这个字串append到url后面，用?分割，加载这个新的url。 当action为post时候，浏览器把form数据封装到http body中，然后发送到server。 如果没有type=file的控件，用默认的application/x-www-form-urlencoded就可以了。 但是如果有type=file的话，就要用到multipart/form-data了。浏览器会把整个表单以控件为单位分割，并为每个部分加上Content-Disposition(form-data或者file),Content-Type(默认为text/plain),name(控件name)等信息，并加上分割符(boundary)
   这里用cdn引用axios和qs,一般在app.js或者在mian.js(或者建一个公用js在需要的地方引用即可)设置axios.post的请求头如下:

  Vue.prototype.$axios = axios;
  Vue.prototype.$qs = Qs;
  //	响应超时时间
  axios.defaults.timeout = 5000;
  //	使用axios.post要设置此响应头，否则后台无法获取数据
  axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
  //	请求的地址
  axios.defaults.baseURL = 'http://localhost:9090/';

通过axios.post传输参数还是在浏览器暴露出所传参数，暂时不清楚原因，官网也没有说明。

2. application/json

   有的时候发现 ajax请求中 content-type:application/json,这样也能在后台接受前台提交的数据，其实这个时候前端提交的数据是 json格式的字符串，后端要用@requestbody注解来接收

如果项目框架是springboot/springmvc，直接用@RestController接收也可以。