帝王谷资源网 Design By www.wdxyy.com
在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中。他有很多优秀的特性,例如拦截请求和响应、取消请求、转换json、客户端防御cSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护,直接推荐我们使用axios库。如果还对axios不了解的,可以移步axios文档。
安装
npm install axios; // 安装axios
好了,下面开始今天的正文。
此次封装用以解决: (对于登录功能的可以直接使用,其他网络请求也可以直接用,如果有洁癖,可以把token有关的几行代码删掉)
ps:使用时得的引入axios时: import axios from '这个文件的名字及相对路径'
- 接受后台token
- post参数自动转换,省略qs.stringify()
- 后台token过期之后自动清除本地数据,以便下次再次输入账号密码
- 更好的错误提示信息
/** * 封装网络请求 */ import axios from "axios" import qs from "querystring" import store from '../store' import router from '../router' //token过期之后重新回登录界面 const toLogin = () =>{ router.push("/login") } // 错误信息响应方法 const errroHandle = (status,other) => { switch(status){ case 400: console.log("服务器无法理解请求信息"); break; case 401: console.log("用户信息验证失败"); localStorage.removeItem("token"); // 可选项 toLogin(); break; case 403: console.log("请求被限制"); localStorage.removeItem("token"); // 可选项 toLogin(); break; case 404: console.log("客户端请求信息错误"); break; default: console.log(other); break; } } // 创建axios对象 const instance = axios.create({ timeout:5000 }) // 挂在全局对象 instance.defaults.baseUrl = ""; instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; // 拦截器:请求拦截和响应拦截 post请求参数需要转码 // axios的返回值对象要求是一个promise对象 instance.interceptors.request.use(config =>{ if(config.method === "post"){ config.data = qs.stringify(config.data) } if(store.state.token){ config.headers.authorization = store.state.token; } return config; },error => Promise.reject(error)) instance.interceptors.response.use( // 成功 response => response.status === 200 "请求被中断"); } } ) export default instance
总结
以上所述是小编给大家介绍的封装一下vue中的axios示例代码详解,希望对大家有所帮助!
帝王谷资源网 Design By www.wdxyy.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com
暂无评论...
更新日志
2024年11月01日
2024年11月01日
- Dragon Beauties小龙女《爱的奇迹》[320K/MP3][30.85MB]
- 魔兽世界奥杜尔团本竞速赛奖金有多少 奥杜尔团本竞速赛奖金介绍
- 暗喻幻想大沙虫巢穴怎么过 暗喻幻想大沙虫巢穴收集攻略
- 暗喻幻想食人洞穴怎么过 暗喻幻想食人洞穴收集攻略
- 锦绣二重唱《情比姊妹深》[原抓WAV+CUE]
- 碧娜《别太晚回家》[原抓WAV+CUE]
- 伽菲珈而《响往Vol.1》24K金碟限量首版[原抓WAV+CUE]
- 《超级马里奥派对:空前盛会》新作解锁!发售宣传片现已公开
- 任天堂Switch公布8周年:新主机何时来?
- 玩家反馈Switch固件更新有严重问题!待机过热 耗电多
- 唐俪.2023-月下再相逢【豪记】【WAV+CUE】
- 群星.2000-杨贵妃主题曲原声大碟【环球】【WAV+CUE】
- 钟镇涛.1994-情歌对唱集·寂寞【飞碟】【WAV+CUE】
- B10Y《We Are B10Y》[320K/MP3][250.22MB]
- B10Y《We Are B10Y》[FLAC/分轨][640.5MB]