【axios封装踩坑】axios封装post请求返回undefined而不是promise的问题

搞了好久发现是一个蠢爆了的原因,还不知道具体是为什么,总之先记录下来

//这是我第一次封装post请求,之前都是封装这样的get:
export const delArt=(id)=>axios.get('/delete?id='+id);

//于是有样学样封装了post
export const postArt=(title,content)=>{
    axios.post('/postArt',{
        params:{
            title:title,
            content:content
        }
    });
}

结果发送请求是没问题,请求内容也正常执行了,但是之后vue代码中的then无法执行,提示 ‘Cannot read property ‘then’ of undefined’

鼓捣了好久突发奇想,直接在vue代码中使用未封装的axios.post,成功执行then,于是想会不会是封装的问题

然后发现这样就能解决了

export const postArt=(title,content)=>{
    return axios.post('/postArt',{//这里加个return T_T
        params:{
            title:title,
            content:content
        }
    });
}

得找时间再看看axios了,希望大家不要和我一样傻逼

### 使用 Axios 进行请求封装实现自定义配置 #### 设置全局默认值 为了确保每次发送 HTTP 请求时都能自动应用特定的头部信息和其他配置项,可以利用 `axios` 提供的 `.defaults` 属性来设定全局性的默认选项。这包括但不限于指定 Content-Type、超时时长以及跨域资源共享(CORS)策略等内容。 ```javascript // 设定全局默认配置 axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'; axios.defaults.timeout = 60000; axios.defaults.crossDomain = true; ``` #### 添加自定义请求头 除了基本的全局配置外,在某些场景下可能还需要针对具体的 API 接口添加额外的信息至请求头内。比如当涉及到分页查询时,则可以在 headers 中加入 pageable 字段表示当前页面是否支持分页功能[^4]。 ```javascript if (config.pageable !== undefined && config.pageable !== null){ config.headers['pageable'] = config.pageable || false; } ``` #### 创建拦截器处理逻辑 为了让代码更加模块化易于维护,通常会创建两个拦截器分别用来修改即将发出的数据包(即 request 拦截器),还有就是接收服务器响应之后再做进一步加工前的操作(response 拦截器)。这里展示了一个简单的例子说明怎样在发起请求之前向 header 加入 token 或其他认证凭证,并且开启加载动画;而在接收到回复后则隐藏该提示框[^2]。 ```javascript // Request Interceptor axios.interceptors.request.use( function(config) { const token = localStorage.getItem('token'); if(token){ config.headers.Authorization = `Bearer ${token}`; } startLoading(); // 显示 loading return config; }, function(error) { stopLoading(); // 错误情况下也要停止 loading return Promise.reject(error); } ); // Response Interceptor axios.interceptors.response.use( response => { stopLoading(); return response; }, error => { stopLoading(); return Promise.reject(error); } ); ``` #### 初始化项目时注册函数 最后一步是在应用程序启动之初就执行一次初始化操作,从而保证后续所有的网络通信都能够按照预期的方式工作。例如可以通过调用某个方法去获取存储于本地缓存里的用户身份验证令牌等重要资料作为请求的一部分提交给服务端进行校验[^3]。 ```javascript import { setStorageHeaders } from './path/to/setStorageHeaders'; function initApp() { setStorageHeaders(); } initApp(); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值