Axios POST FormData格式请求

目录

前言

使用axios进行post请求的时候，默认是传递的json格式的参数，当接口需要FormData格式的数据时就需要我们对请求的格式进行调整

实现步骤

1.配置请求头

FormData格式的请求头Content-Type格式为以下两种格式的其中一种

'Content-Type': 'application/x-www-form-urlencoded'
//或者
'Content-Type': 'multipart/form-data'

对axios的配置如下：

import axios from 'axios';

const service = axios.create({
    timeout: 5000,
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'Accept': '*/*'
    }
});

2.请求数据格式化

上面那一步完成后我们还需要对请求的数据格式化为FormData格式，这里我们用到了qs

import axios from 'axios';
import qs from 'qs'

const service = axios.create({
    timeout: 5000,
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'Accept': '*/*'
    }
});

service.interceptors.request.use(
    config => {
        // 将请求数据转换成功 formdata 接收格式
        config.data = qs.stringify(config.data)
        // return config
        return config;
    },
    error => {
        console.log(error);
        return Promise.reject();
    }
);

然后下面展示的是完整的内容：

import axios from 'axios';
import qs from 'qs'

const service = axios.create({
    // process.env.NODE_ENV === 'development' 来判断是否开发环境
    // easy-mock服务挂了，暂时不使用了
    baseURL: 'http://ym.sdxclive.com/',
    timeout: 5000,
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'Accept': '*/*'
    }
});

service.interceptors.request.use(
    config => {
        // 将请求数据转换成功 formdata 接收格式
        config.data = qs.stringify(config.data)
        // return config
        return config;
    },
    error => {
        console.log(error);
        return Promise.reject();
    }
);

service.interceptors.response.use(
    response => {
        if (response.status === 200) {
            return response;
        } else {
            Promise.reject();
        }
    },
    error => {
        console.log(error);
        return Promise.reject();
    }
);

export default service;

使用的时候如下：

<script>
    import request from "../../utils/request.js"
    export default {
        data: function() {
            return {};
        },
        methods: {
            submitForm() {
                request({
                        method: 'POST',
                        url: '/api/login',
                        data: {
                            userName: '123',
                            passWord: '123'
                        },
                    })
                    .then(res => {
                        console.log(res.data);
                    })
                },
            },
        };
</script>