美文网首页web前端
axios发送formdata请求

axios发送formdata请求

作者: 姜治宇 | 来源:发表于2020-06-23 13:56 被阅读0次

    axios 默认是 Payload格式数据请求,但有时候后端接收参数要求必须是 Form Data 格式的,所以我们就得进行转换。
    Payload和Form Data的主要设置是根据请求头的 Content-Type 的值来的:
    Payload    Content-Type: 'application/json; charset=utf-8'
    Form Data   Content-Type: 'application/x-www-form-urlencoded'
    实现方法:

    axios({
       method: 'post',
       url: 'http://localhost:8080/login',
       data: {
          username: obj.username,
          password: obj.passwd
       },
       transformRequest: [
          function (data) {
             let ret = ''
             for (let it in data) {
                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
             }
             ret = ret.substring(0, ret.lastIndexOf('&'));
             return ret
          }
        ],
        headers: {
           'Content-Type': 'application/x-www-form-urlencoded'
        }
    })
    

    我们也可以利用拦截器进行全局配置:

    import axios from 'axios'
    import qs from 'qs'
     
    // 实例对象
    let instance = axios.create({
      timeout: 3000,
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    })
     
    // 请求拦截器
    instance.interceptors.request.use(
      config => {
        config.data = qs.stringify(config.data) // 转为formdata数据格式
        return config
      },
      error => Promise.error(error)
    )
    

    其中 qs 模块是安装 axios 模块的时候就有的,不用另行安装,通过 import 引入即可使用。

    相关文章

      网友评论

        本文标题:axios发送formdata请求

        本文链接:https://www.haomeiwen.com/subject/ytqhfktx.html