封装axios方法之一
2024-10-01 09:39:27
一、先来说说为什么要封装axios异步请求。
我们前端开发中总是会遇到跨域的问题,我们会配置proxy来解决跨域的问题,无论是vue 还是react。
如何配置我这里就不说了。
然后...然后我们就会遇到一个打包上线的问题,上线时候我们必须把前缀拼接上,如果每个页面都保存一个路径变量会很麻烦,所以我们会封装axios来统一管理路径,这样可以使我们页面请求变得更加简洁。
代码如下
import axios from 'axios'
import qs from 'qs' let http={
post:"",
get:""
}
// http://60.10.00.005:8080
//方法一 统一拦截
const Website="";
http.post= function (api,data){
let params = qs.stringify(data)
return new Promise((resolve,reject) => {
axios.post(`${Website}`+api,params).then((res) =>{
resolve(res)
})
})
}
http.get= function (api,data){
let params = qs.stringify(data)
return new Promise((resolve,reject) => {
axios.post(`${Website}`+api,params).then((res) =>{
resolve(res)
})
})
}
方法二单个请求定义
// export function _login(data){
// let params = qs.stringify(data)
// return axios.post('/hrjc/mobile/login',params)
// }
export default http
个人偏爱方法一,因为方法一让我感觉代码会比较干净吧。方法二需要每个请求都写一次,显得代码太冗余了。
方法一用法如下
import http from '../server';
http.post("/login",{"loginName": userName,"password": password})
.then(function(response){}
.catch(function(err){
console.log("失败"+err);
})
方法二同理使用,就是提出去一部分,
个人知识积累
最新文章
- js中取得当前加载的js的src地址
- 【Android UI】Android Layout XML属性
- new 运算符
- UVa 536 Tree Recovery
- windows github 搭建与使用
- 用java写随机出题
- unity3d 幻灯片效果实现
- 【转】GATT Profile 简介
- Jquery实现图片切换效果(IE,FF,Goole)都可以正常运行
- const限定符的作用
- Hash表分析
- MapReduce执行过程
- js实现点击切换显示隐藏,点击其它位置再隐藏
- 解决Idea无法提示代码、不检查语法的方法
- tp3.2 上传文件及下载文件
- LEFT JOIN、RIGHT JOIN、INNER JOIN、FULL JOIN 使用
- QLabel-标签控件的应用
- linux 断网 扫描基本命令
- 乐字节-Java8新特性之Optional
- mac 下python使用venv 虚拟环境