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 相关文章推荐
起点页面传值js,有空研究学习下
Jan 25 Javascript
js分解url参数(面向对象-极简主义法应用)
Aug 09 Javascript
GRID拖拽行的实例代码
Jul 18 Javascript
javascript十六进制及二进制转化的方法
May 06 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
May 23 Javascript
实例讲解jQuery中对事件的命名空间的运用
May 24 Javascript
XMLHttpRequest Level 2 使用指南
Aug 26 Javascript
JavaScript职责链模式概述
Sep 17 Javascript
Javascript实现找不同色块的游戏
Jul 17 Javascript
JavaScript中附件预览功能实现详解(推荐)
Aug 15 Javascript
elementUI 设置input的只读或禁用的方法
Oct 30 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
Feb 26 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
用Flash图形化数据(一)
2006/10/09 PHP
基于mysql的bbs设计(四)
2006/10/09 PHP
七款最流行的PHP本地服务器分享
2013/02/19 PHP
探讨各种PHP字符串函数的总结分析
2013/06/05 PHP
php将字符串转化成date存入数据库的两种方式
2014/04/28 PHP
PHP配置ZendOpcache插件加速
2019/02/14 PHP
Jquery拖拽并简单保存的实现代码
2010/11/28 Javascript
高性能JavaScript模板引擎实现原理详解
2015/02/05 Javascript
JS的框架Polymer中的dom-if和is属性使用说明
2015/07/29 Javascript
原生JS中slice()方法和splice()区别
2017/03/06 Javascript
Iscrool下拉刷新功能实现方法(推荐)
2017/06/26 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
2020/04/12 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
2018/08/08 Javascript
Vue中插入HTML代码的方法
2018/09/21 Javascript
JQuery中的常用事件、对象属性与使用方法分析
2019/12/23 jQuery
JS实现扫码枪扫描二维码功能
2020/01/03 Javascript
Vue组件基础用法详解
2020/02/05 Javascript
jquery实现手风琴案例
2020/05/04 jQuery
Python编程判断一个正整数是否为素数的方法
2017/04/14 Python
Python生成数字图片代码分享
2017/10/31 Python
django 中使用DateTime常用的时间查询方式
2019/12/03 Python
jupyter notebook实现显示行号
2020/04/13 Python
python sitk.show()与imageJ结合使用常见的问题
2020/04/20 Python
Django自关联实现多级联动查询实例
2020/05/19 Python
解决import tensorflow导致jupyter内核死亡的问题
2021/02/06 Python
HTML5之语义标签介绍
2016/07/07 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
2017/07/11 HTML / CSS
索尼巴西商店:Sony巴西
2019/06/21 全球购物
DeinDesign德国:设计自己的手机壳
2019/12/14 全球购物
卖房协议书
2014/04/11 职场文书
确保工程质量承诺书
2015/04/29 职场文书
出纳2015年度工作总结范文
2015/10/14 职场文书
Django操作cookie的实现
2021/05/26 Python
Html5大屏数据可视化开发的实现
2021/06/11 HTML / CSS
JavaScript 定时器详情
2021/11/11 Javascript
服务器nginx权限被拒绝解决案例
2022/09/23 Servers