config.data = JSON.stringify(config.data)

"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"

import Qs from "qs"
 // 創(chuàng)建axios實例
    const service = axios.create({
      baseURL: process.env.VUE_APP_baseUrl,
      timeout: 5000,
     ...//其他配置
     //transformRequest用來對請求參數(shù)提前進(jìn)行處理
      transformRequest: [data => Qs.stringify(data, { indices: true })] //Qs.stringify將參數(shù)序列化成key=value&key=value的形式，indices: true是配置參數(shù)有傳數(shù)組的時候，以下標(biāo)的形式
    })

{
	title:'標(biāo)題'，
	list:[1,2,3]
}

Qs.stringify(data, { indices: true }//這個如果用false的話。傳數(shù)組就是title=標(biāo)題&list=1&list=2&list=3的形式了，也就是不帶索引。

var a = {name:'hehe',age:10};

name=hehe&age=10

"{"a":"hehe","age":10}"

import axios from "axios"
import { Message as showMessage } from "element-ui"
import errorCode from "./errorCode"
// import store from "@/store"
import Qs from "qs"
// axios.defaults.headers["Content-Type"] = "application/json" //底下創(chuàng)建axios實例時配置了，這個不用重復(fù)配置，再說，這也是axios的默認(rèn)配置
export default function request(options) {
  return new Promise((resolve, reject) => {
    // 創(chuàng)建axios實例
    const service = axios.create({
      // 表示請求URL公共部分，它會讀取這里的值，然后拼接上頁面使用的url
      baseURL: process.env.VUE_APP_baseUrl,
      timeout: 5000,
      withCredentials: false, // 跨域請求時是否需要cookie等憑證
      responseType: "json",
      params: {},
      maxContentLength: 2000,
      validateStatus: status => status >= 200 && status < 300, //默認(rèn)值
      maxRedirects: 5, //最大允許重定向次數(shù)
      headers: {
        //公共請求頭配置，本項目請求頭大多數(shù)接口是這個，所以這里可以配置一下，對于特殊接口單獨配置
        "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
      }
      // transformRequest: [data => Qs.stringify(data, { indices: true })] //將參數(shù)key=value序列化，因為本項目有的接口需要json/對象傳參數(shù)，這里就不能這樣直接全局配置，否則有的接口會報400(因為你把json或者是對象類型的數(shù)據(jù)，在這里key=value序列化了)
    })
    // request攔截器
    service.interceptors.request.use(
      config => {
        switch (config.method) {
          case "get":
            if (!config.params) {
              config.params = {}
            }
            break
          case "post":
            if (!config.data) {
              config.data = {}
            }
            if (config.type === "keyValue") {
              config.data = Qs.stringify(config.data) //配套application/x-www-form-urlencoded使用
            } else {
              config.headers["Content-Type"] = "application/json" //配套application/json使用
            }
            break
          default:
        }
        console.log(`【request】url:${config.url},data:${config.data} `)
        return config
      },
      error => {
        console.log(error)
        Promise.reject(error)
      }
    )

    // 響應(yīng)攔截器
    service.interceptors.response.use(
      res => {
        // 未設(shè)置狀態(tài)碼則默認(rèn)成功狀態(tài)
        const code = parseInt(res.data.code) || 0
        // 獲取錯誤信息
        const msg = res.data.msg || errorCode[code] || errorCode["default"]
        if (code != 0) {
          showMessage({
            message: msg,
            type: "error"
          })
          reject(new Error(msg))
          return
        } else {
          resolve(res.data) //獲取到成功的響應(yīng)了，就把結(jié)果resolve出去
        }
      },
      error => {
        console.log("err" + error)
        let { message } = error
        if (message == "Network Error") {
          message = "網(wǎng)絡(luò)異常，請檢查網(wǎng)絡(luò)"
        } else if (message.includes("timeout")) {
          message = "系統(tǒng)接口請求超時，請檢查網(wǎng)絡(luò)"
        } else if (message.includes("Request failed with status code")) {
          message = "系統(tǒng)接口" + message.substr(message.length - 3) + "異常"
        }
        showMessage({
          message: message,
          type: "error",
          duration: 5 * 1000
        })
        return reject(error)
      }
    )
    service(options)
  })
}

import request from "./request.js"
import { Loading } from "element-ui"
let http = {
  /** post 請求
   * @param  {接口地址} url
   * @param  {請求參數(shù)} params
   * @param  {請求的參數(shù)處理類型}
   * keyValue：默認(rèn)的application/x-www-form-urlencoded，使用qs.stringify序列化。
   * json:使用application/json，不用處理參數(shù)
   */
  post: function (url, params, type = "keyValue") {
    let loadingInstance = Loading.service({
      lock: true,
      text: "請稍候",
      spinner: "el-icon-loading",
      background: "rgba(0, 0, 0, 0.7)",
      fullscreen: false,
      customClass: "loadingClass"
    })
    return new Promise((resolve, reject) => {
      request({
        url,
        method: "post",
        data: params,
        type
      })
        .then(response => {
          loadingInstance.close()
          resolve(response)
        })
        .catch(error => {
          loadingInstance.close()
          reject(error)
        })
    })
  }
}
export default http

async newDog() {
      const that = this
      let params = {
        ...this.petForm
      }
      try {
        let res = await that.$http.post("/dog/newDog", params, "json")
        console.log("--接口請求成功--", res)
        that.$message({
          message: "接口請求成功",
          type: "success"
        })
      } catch (err) {
        console.log("報錯了：", err)
      }
},