vue 里面使用axios 和封装的示例代码
网络编程 2021-07-04 18:33www.168986.cn编程入门
本篇文章主要介绍了vue 里面使用axios 和封装的示例代码,非常具有实用价值,需要的朋友可以参考下
vue官方推荐使用 axios发送请求
上需求
1.需要封装全局调用
2.返回一个promise对象
3.错误全局统一处理
4.除了登录界面token带入头部
5.登录时候把用户信息自动存到vuex里面
上封装代码
/ User: sheyude Date: 2017/8/23 0023 Time: 下午 13:15 / import axios from 'axios'; // 导入配置文件 配置文件就导入的请求的前缀地址 import {defaults} from '@/config/' import storage from './storage' // 这是一个饿了么的弹框 import { Message } from 'element-ui'; //路由配置 import router from '@/router' / 封装的全局ajax请求 / class Axios{ constructor (){ this.init(); }; / 初始化 / init(){ axios.defaults.baseURL = defaults.baseURL; }; _setUserInfo(data){ // 把请求的数据存入vuex store.mit('setUserInfo',data); } / 判断是否是登录 @param url @returns {boolean} @private / _isLogin(url){ if(url != '/app/login'){ axios.defaults.headers = {'x-token': store.state.user.user.token.token}; return false; }else{ return true; } } / 判断是否返回数据 @param data 接收到的数据 @returns {boolean} @private / _isStatus(data){ if(data.code == 100){ router.push('/login'); Message.error(data.message || '请重新登录!'); return false }else{ return true } } / 全局错误处理 @param data 传入错误的数据 @private / _error(data){ console.log(data) Message.error('网络错误!'); } / GET 请求 {es6解构赋值} @param type 包含url信息 @param data 需要发送的参数 @returns {Promise} @constructor / HttpGet({url},data) { console.log(data) // 创建一个promise对象 this._isLogin(url) this.promise = new Promise((resolve, reject)=> { axios.get(url,{params:data}) .then((data) => { // console.log(data) if(this._isStatus(data.data)){ resolve(data.data); } }) .catch((data) =>{ this._error(data); }) }) return this.promise; }; / POST 请求 @param type Object 包含url信息 @param data Object 需要发送的参数 @param urlData Object 需要拼接到地址栏的参数 @returns {Promise} @constructor / HttpPost({url},Data,urlData){ // 判断是否加头部 this._isLogin(url); // 创建一个promise对象 this.promise = new Promise((resolve, reject)=> { for(const item in urlData){ url += '/' + urlData[item]; }; axios.post(url,Data) .then((data) => { // 是否请求成功 if(this._isStatus(data.data)){ // 是否需要存数据 if(this._isLogin(url)){ this._setUserInfo(data.data) }; resolve(data.data) }; }) .catch((data) =>{ this._error(data); }) }) return this.promise; }; }; export default new Axios();
调用方式
this.$axios.HttpPost(this.audit.auditGet,this.params) .then((data) => { this.pageData = data.data })
接收2个参数
1 url 地址
2 需要传递的参数
我目前全局注册了 使用需要挂载到vue原型
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
上一篇:Vue使用vue-cli创建项目
下一篇:ionic2懒加载配置详解
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程