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

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

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

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

2. 封装请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//* 封装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调用了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
    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中写请求,直接引入请求然后直接用就行了

1
2
3
4
5
6
7
8
9
import {<!-- --> myRequest } from '../.././router/axios'
actions: {<!-- -->
    async getVillageList(context, payload) {<!-- -->
      const {<!-- -->
        data: {<!-- --> village }
      } = await myRequest(payload)
      context.commit('setVillageList', village)
    }
}