封装axios form-data 针对统一的formData入参方式

封装axios form-data 针对统一的formData入参方式

1. 在axios中，设置请求头的content-type

 config.headers.post['Content-Type'] = 'multipart/form-data'

2. 封装请求

//* 封装post请求
export function post(url, data = {}) {
  return new Promise((resolve, reject) => {
    axios({ url, method: 'post', data }).then(
      response => {
        resolve(response.data)
      },
      err => {
        reject(err)
      }
    )
  })
}

//* post2.0请求,针对统一的formData入参方式
export function myRequest(url, data = {}) {
  let formData = new FormData()
  for (let key in data) {
    if (data.hasOwnProperty(key)) {
      let ele = data[key]
      formData.append(key, ele)
    }
  }
  return post(url, formData)
}

3. 在main.js中 引入并挂载到prototype上就可以在全局中用this调用了

	import {  post, myRequest } from './router/axios'
	Vue.prototype.$myRequest = myRequest
	Vue.prototype.$request = request

	在组件中的调用例子
	    async delHouse(id) {
	      const confirmResult = await this.$confirm(
	        '此操作将永久删除该条信息, 是否继续?',
	        '提示',
	        {
	          confirmButtonText: '确定',
	          cancelButtonText: '取消',
	          type: 'warning'
	        }
	      ).catch(err => err)
	      if (confirmResult !== 'confirm') {
	        return this.$message.info('取消删除')
	      }
	      // this.$api.delSource 是接口api  { id } 是传的参数  如果你需要传数组的话需要用JSON.stringify() 如：{JSON: JSON.stringify(arr) }
	      const { message } = await this.$myRequest(this.$api.delSource, { id })
	      this.$message({
	        message,
	        type: 'success'
	      })
	      this.getList()
	    }

说一下怎么在vuex中写请求，直接引入请求然后直接用就行了

import { myRequest } from '../.././router/axios'
actions: {
    async getVillageList(context, payload) {
      const {
        data: { village }
      } = await myRequest(payload)
      context.commit('setVillageList', village)
    }
}