vue 里面使用axios 和封装的示例代码


Posted in Javascript onSeptember 01, 2017

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.commit('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原型

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery选择器的整理集合
Apr 26 Javascript
JS滚轮事件onmousewheel使用介绍
Nov 01 Javascript
原生js ActiveXObject获取execl里面的值
Nov 01 Javascript
jQuery给动态添加的元素绑定事件的方法
Mar 09 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
Aug 21 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
Aug 26 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
Jul 07 Javascript
Javascript从数组中随机取出不同元素的两种方法
Sep 22 Javascript
第一次接触神奇的Bootstrap
Oct 14 Javascript
原生js编写基于面向对象的分页组件
Dec 05 Javascript
微信通过页面(H5)直接打开本地app的解决方法
Sep 09 Javascript
详解服务端预渲染之Nuxt(介绍篇)
Apr 07 Javascript
ionic2懒加载配置详解
Sep 01 #Javascript
javascript 中事件冒泡和事件捕获机制的详解
Sep 01 #Javascript
Vue的Class与Style绑定的方法
Sep 01 #Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
Sep 01 #Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
Sep 01 #Javascript
Angularjs实现上传图片预览功能
Sep 01 #Javascript
JavaScript中使用参数个数实现重载功能
Sep 01 #Javascript
You might like
PHP4实际应用经验篇(5)
2006/10/09 PHP
PHP实时显示输出
2008/10/02 PHP
php取得字符串首字母的方法
2015/03/25 PHP
PHP设计模式概论【概念、分类、原则等】
2020/05/01 PHP
Firefox和IE浏览器兼容JS脚本写法小结
2008/07/07 Javascript
javascript 面向对象编程基础:继承
2009/08/21 Javascript
js和css写一个可以自动隐藏的悬浮框
2014/03/05 Javascript
jquery实现简单的轮换出现效果实例
2015/07/23 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
2016/04/29 Javascript
浅析JSONP技术原理及实现
2016/06/08 Javascript
在javascript中使用com组件的简单实现方法
2016/08/17 Javascript
js实现的光标位置工具函数示例
2016/10/03 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
2017/03/02 Javascript
js清除浏览器缓存的几种方法
2017/03/15 Javascript
vue-cli+webpack项目 修改项目名称的方法
2018/02/28 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
2018/08/30 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
2018/08/31 Javascript
Vue组件通信的几种实现方法
2019/04/25 Javascript
实例讲解React 组件生命周期
2020/07/08 Javascript
python通过wxPython打开一个音频文件并播放的方法
2015/03/25 Python
在Python中使用base64模块处理字符编码的教程
2015/04/28 Python
python实现判断一个字符串是否是合法IP地址的示例
2018/06/04 Python
python 随机生成10位数密码的实现代码
2019/06/27 Python
pyftplib中文乱码问题解决方案
2020/01/11 Python
Python使用matplotlib绘制圆形代码实例
2020/05/27 Python
让IE下支持Html5的placeholder属性的插件
2014/09/02 HTML / CSS
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
Feelunique澳大利亚:欧洲的化妆品零售电商
2019/12/18 全球购物
J2EE相关知识面试题
2013/08/26 面试题
应聘教师自荐信
2013/10/12 职场文书
大学生的应聘自我评价
2013/12/13 职场文书
小学防溺水制度
2014/01/29 职场文书
党员批评与自我批评
2014/02/12 职场文书
食品安全承诺书范文
2014/08/29 职场文书
企业管理制度设计时要注意的几种“常见病”!
2019/04/19 职场文书
Win11软件图标固定到任务栏
2022/04/19 数码科技