axios 的一些封装 和 简单的用法 （记录）

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_45430248/article/details/102600352

axios 基本封装

1. utils下的request.js文件配置

import axios from 'axios' 

const request = ({
    url,
    method = 'get' || 'GET',//默认git
    headers,
    params,
    data,//post请求的数据参数
    withCredentials, //跨源凭证，像后端证明我们是有资格来进行后端接口请求 
}) => {
    return new Promise(( resolve,reject ) => {
        switch ( method ) {
            case 'get' || 'GET':
                axios.get( url, {
                    headers, 
                    params,
                    withCredentials
                }).then( res => resolve( res )).catch( e => console.log( e ))
                break;
        
            case 'post' || 'POST':  
                let paramsData = new URLSearchParams() 
                //简单处理一下append方法 这样用的时候可以直接在data里面写 key value
                for ( var key in data ) {
                    paramsData.append( key,data[ key ] )
                }
                axios({
                    url,
                    data: paramsData,
                    headers
                }).then( res => resolve( res ))
                  .catch( err => console.log( err ))
                break;
                
            case 'put' || 'PUT':
                axios({
                    url,
                    method,
                    params,
                    headers
                }).then( res => resolve( res ))
                  .catch( err => console.log( err ))
                break;
                
            case 'delete' || 'DELETE':
                axios({
                    url,
                    params,
                    method,
                    headers
                }).then( res => resolve( res ))
                  .catch( err => console.log( err ))
                break;
            default:
                break;
        }
    })
}

export default request 

2. main.js下的一些全局配置

//统一设置post请求头和baseUrl
axios.defaults.baseURL = 'http://localhost:8080';
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;