在vue中,promise封装axios

news/2024/7/11 1:55:02 标签: javascript, vue.js, es6

安装axios

npm i axios --save

建文件

在这里,我创建了一个名为utils的文件夹,并创建了一个名为myAxios的js文件
建文件夹

代码

javascript">import axios from 'axios';
let baseUrl = '';
//  判断环境
if(process.env.NODE_ENV == 'development'){
    baseUrl = 'https://www.fastmock.site/mock/15e2ed40f35bffc490901023f02c55f0/api';
}else{
    baseUrl = '';
}
axios.defaults.baseURL = baseUrl;
const $http = axios.create()

/**
 * post请求方式;
 * params: url, params
 */
export const post = (url, params) =>{
    params = params || {};
    return new Promise((resolve,reject) => {
            $http.post(url, params).then((res) =>{
                if(res.data.code == 0){
                    resolve(res.data);//  成功
                }else{
                    reject(res); //  操作失败
                }
            }).catch( err =>{
                console.log("网络错误", err)  
            })
    })

}

/**
 * get请求方式
 */
export const get = (url, params) =>{
    params = params || {};
    return new Promise((resolve, reject) =>{
        $http.post(url, params).then((res) =>{
            if(res.data.status){
                resolve(res.data);  //  成功
            }else{
                reject(res); //  操作失败
            }
        }).catch((err) =>{
            console.log("网络错误", err);  
        })
    })
}

模拟接口

使用fastmock来模拟接口
在这里插入图片描述

使用方法

在main.js文件中:
在这里插入图片描述
作为vue原型上的实例使用
在这里插入图片描述

请求成功

在这里插入图片描述

结尾处,欢迎交流学习,纠错。


http://www.niftyadmin.cn/n/842837.html

相关文章

CCTC 2017开幕在即,全部讲师和议程公布

距离在北京朝阳门悠唐皇冠假日酒店召开的CCTC 2017开幕还有十天时间,目前大会的讲师和议题已经全部确定,50多位来自国内外的原生技术发明人和贡献者汇聚一堂,就云计算、大数据、智能运维、微服务、人工智能、区块链等核心话题展开深度探讨。 …

vue中,组件使用keep-alive缓存,beforeDestroy和destroyed会被调用吗?

分析 首先,答案是不会的,准确的说是不会直接调用。 默认情况下,也就是没有设置keep-alive,当离开当前路由时,会直接调用beforeDestroy和destroyed来销毁。 当组件设置keep-alive后,不会直接调用这个销毁周期函数&…

写给想学习自动化测试的新人

最近通过各种渠道发现大家对一些测试工具的基本情况不太清楚,经常会问类似于watir与watir webdriver的区别,我有1个项目,是用watir还是用selenium webdriver呢,之类的问题,在这里笔者不才略微总结一下,希望…

在js中,使用canvas绘制渐变色线条

效果 代码 注:看注释 var colors [#6bfae1 ,#63b9e9 ,red ,yellow ,blue, green];var ctx canvas.getContext(2d);ctx.moveTo(50, 300);ctx.lineTo(700, 300);ctx.lineTo(750, 200);ctx.lineTo(780, 150);// ...若干个坐标var line ctx.createLinearGradient(5…

Facebook推出Instant Game:可在对话窗内玩游戏

在Facebook的即时通讯软件Messenger上,现在还可以玩游戏了!Messenger为了让人们互动之间增添更多趣味性和互动性,推出新功能“Instant Game”,使用者在聊天室窗里就能与朋友玩游戏,像是PAC-MAN(小精灵&…

canvas宽高改变后,画布上的内容消失了

当你有个某种需求,需要改变canvas宽高时,你会发现,画布上的内容没了,这是因为canvas的大小改变后会自动清除内容的,这时候我们需要重新绘制画布。 未改变宽高前的canvas var ctx canvas.getContext(2d);ctx.beginPat…

光纤将在5G发展中发挥关键作用

近日, 康普公司表示,在宽带发展的将来,网络融合将大规模采用光纤。此前,康普共同赞助了Telecoms.com Intelligence的“宽带展望2016”调研,结果显示光纤将在5G发展以及所有FTTH部署的网络速度方面发挥关键作用。 “未来光纤将更加…

css自定义checkbox被选中的背景色

标签 <input type"checkbox" id"checked"/> <span>请选择</span>css样式 使用after伪类选择器 #checked[typecheckbox] {position: relative;width: 16px;height: 16px;cursor: pointer;}#checked[typecheckbox]::after {position: a…