谈谈构建vue项目axios配置两种数据格式区别

传给后端的两种数据格式区别

文章链接：https://www.cnblogs.com/edwardwzw/p/11694903.html

解： 1:请求为get的时候，参数在URL中。

2：请求为post的时候在请求body中，这里有两种方式（json和form的字符串），取决于后端需要哪一种方式。后一种方式需要使用qs.stringify()转换。

（1） service.defaults.headers.post['Content-Type'] = 'application/json' .这种是默认的，所以不用设置。

（2）config.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'.  这种是字符串的方式。

文章里面的解释

转换方式：

在拦截器里面转换

在api中的文件夹里面编写

3： 完整 request.js代码，可以直接引用.(包括了统一loading、重复请求的处理、错误的提示)

import axios from 'axios'

import qs from 'qs'

import store from '../store'

import { Toast } from 'vant'

// 根据发布到服务器的地址作为域名和端口，到时拼接对应的接口文件路径

function getBaseURL(){

    let server = '/api'

    if (process.env.NODE_ENV === 'production') {

      server = window.location.protocol + '//' + window.location.host

    }

    return server

}

// 设置axios的基本配置

const service = axios.create({

    baseURL: getBaseURL(), // 接口的基本路径

    withCredentials: true, // 发送cookie到后端跨域的时候

    timeout: 50000 // 请求过期时间为5s

})

let loadingRequestCount = 0;

// loading打开

const showLoading =  () =>{

  if (loadingRequestCount === 0) {

    store.dispatch('showLoadingStatus')

  }

    loadingRequestCount++

}

const hideLoading = () => {

  if (loadingRequestCount <= 0) return

  loadingRequestCount--

  if (loadingRequestCount === 0) {

      vue.$nextTick(()=>{//以服务的方式调用的 Loading 需要异步关闭

          store.dispatch('closeLoadingStatus')

      })

  }

}

// 解决按钮快速点击重复请求的问题

const CancelToken = axios.CancelToken

let configUrls = []

let removePending = (config) =>{

  configUrls.forEach((item,index)=>{

    if(item.name === config.url+'&'+config.method){

      item.f()

      configUrls.splice(index,1)

    }

  })

}

service.defaults.headers.post['Content-Type'] = 'application/json'

// service.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'

service.interceptors.request.use(config => {

  removePending(config)

  config.cancelToken = new CancelToken((cancel)=>{

    configUrls.push({name: config.url+'&'+config.method, f: cancel})

  })

  if (store.getters.token) {

    config.headers['Authorization'] = JSON.stringify({ 'token': store.getters.token })

    config.headers['clientInfo'] = getClientInfo()

  }

  // 请求拦截进来调用显示loading效果

  showLoading(config)

  return config

}, error => {

  Toast.fail('请求异常 ' + error.message)

  return Promise.reject(error)

})

service.interceptors.response.use(response => {

  removePending(response.config)

  const res = response.data

    // 响应拦截进来隐藏loading效果，此处采用延时处理是合并loading请求效果，避免多次请求loading关闭又开启

    setTimeout(() => {

        hideLoading()

    }, 200)

  // 成功返回数据

  if (res.code === 200) {

    return res

  }

  // 一般这里返回其它状态的时候写其它函数操作，例如退出登录

}, error => {

  // 响应拦截进来隐藏loading效果，此处采用延时处理是合并loading请求效果，避免多次请求loading关闭又开启

    setTimeout(() => {

      hideLoading()

  }, 200)

  // 弹出报错的信息

  if (error.response) {

    code = error.response.status

  } else {

    code = '网络已断开'

  }

  Toast.fail('网络开小差(' + code + ')')

  return Promise.reject(error)

})

export default service

loading.vue组件 引用vant vue

store组件 action

const actions = {

    setName({ commit }, name) {

      commit('SET_NAME', name)

    },

    showLoadingStatus:({ commit }, status) => {

      commit('SET_LOADING_STATUS', true)

    },

    closeLoadingStatus:({ commit }, status) => {

      commit('SET_LOADING_STATUS', false)

    },

}

export default actions