Axios post bugs All In One

[xgqfrms]

Axios post bugs All In One

{} 括号的坑 ❌

import axios from '@/utils/http.js';

// 保存创意
const postCreativeSave = (options = {}) => {
    // post application/x-www-form-urlencoded ✅
    return axios.post('/api/creative/ks', options);
    // post multipart/form-data ❌
    // return axios.post('/api/creative/ks', {params});
};

application/x-www-form-urlencoded

multipart/form-data

application/json

[xgqfrms]

POST FormData bug

https://gist.github.com/xgqfrms/8570bf512c2c111069933bc359e30f0e

https://www.cnblogs.com/xgqfrms/p/14635214.html

[xgqfrms]

solution

屏蔽细节

import axios from '@/utils/http.js';

// 保存创意
const axiosUtils = (url = '', params = {}, type = 'get') => {
    if(!url) {
        throw new Error('❌ API URL 不可为空!');
        // return;
    }
    // switch...case
    if(type === 'post') {
        // application/x-www-form-urlencoded ✅
        return axios.post(url, params);
    }
    if(type === 'get') {
        // multipart/form-data ✅
        return axios.post(url, {params});
    }
    if(type === 'put') {
        // multipart/form-data ✅
        return axios.post(url, {params});
    }
};

[xgqfrms]

https://segmentfault.com/a/1190000015261229

https://www.cnblogs.com/xgqfrms/p/14791070.html

[xgqfrms]

改写 Axios

let oldTimestamp = null;
// 每次请求都带上token
instance.interceptors.request.use(config => {
    // // todo 为了减少测试的报错信息，暂时过滤工作表下的所有拦截逻辑，但上线前必须去掉
    // const isTable = window.location.href.indexOf('/table-2') > -1;
    // if (!pendingUrlWhitelist.includes(config.url) && !isTable) {
    if (!pendingUrlWhitelist.includes(config.url)) {
        removePending(config);
        addPending(config);
    }

    config = requestWithToken(config);
    // 处理 post|delete|put 请求，以formdata形式传参
    if (['post', 'delete', 'put'].includes(config.method)) {
        for (let key in config.data) {
            if (config.data.hasOwnProperty(key) && config.data[key] === null || config.data[key] === undefined) {
                delete config.data[key];
            }
        }
       // 不传 header 默认， query string
        if (!config.headers.hasOwnProperty('Content-Type')) {
            config.data = qs.stringify(config.data);
            config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
        } else {
           // post json
        }
    }
    oldTimestamp = performance.now();

    return config;
}, error => {
    oldTimestamp = performance.now();
    return Promise.reject(error);
});

[xgqfrms]

demos

axios post JSON

    // 更新模板
    updateColumn (data = {}) {
        return axios.put('/api/custom_column/column_preset', data, {
            headers: { 'Content-Type': 'application/json' },
        });
    },

axios post queryString

// 保存创意
const postCreativeSave = (options = {}) => {
    // post application/x-www-form-urlencoded
    return axios.post('/api/creative/kuaishou', options);
};

axios post formData

// 保存创意
const postCreativeSave = (options = {}) => {
    // post application/formdata
    return axios.post('/api/creative/kuaishou', {params});
};