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 相关文章推荐
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
Aug 09 Javascript
jQuery的一些特性和用法整理小结
Jan 13 Javascript
jQuery中removeAttr()方法用法实例
Jan 05 Javascript
JavaScript将XML转成JSON的方法
Mar 12 Javascript
判断输入的字符串是否是日期格式的简单方法
Jul 11 Javascript
Javascript 事件冒泡机制详细介绍
Oct 10 Javascript
如何使用headjs来管理和异步加载js
Nov 29 Javascript
jsTree使用记录实例
Dec 01 Javascript
javascript输出AscII码扩展集中的字符方法
Dec 26 Javascript
BootStrap CSS全局样式和表格样式源码解析
Jan 20 Javascript
详解VSCode配置启动Vue项目
May 14 Javascript
vue语法自动转typescript(解放双手)
Sep 18 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
杏林同学录(一)
2006/10/09 PHP
PHP IE中下载附件问题解决方法
2014/01/07 PHP
php使用file函数、fseek函数读取大文件效率对比分析
2016/11/04 PHP
Javascript UrlDecode函数代码
2010/01/09 Javascript
jqgrid 简单学习笔记
2011/05/03 Javascript
js解决弹窗问题实现班级跳转DIV示例
2014/01/06 Javascript
jquery ajaxSubmit 异步提交的简单实现
2014/02/28 Javascript
js闭包实例汇总
2014/11/09 Javascript
JQuery鼠标移到小图显示大图效果的方法
2015/06/10 Javascript
javascript实现3D变换的立体圆圈实例
2015/08/06 Javascript
jQuery ajax请求struts action实现异步刷新
2017/04/19 jQuery
详解Angular 4.x Injector
2017/05/04 Javascript
使用jQuery实现动态添加小广告
2017/07/11 jQuery
详谈commonjs模块与es6模块的区别
2017/10/18 Javascript
微信小程序实现左滑修改、删除功能
2020/10/19 Javascript
使用react render props实现倒计时的示例代码
2018/12/06 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
TypeScript中使用getElementXXX()的示例代码
2019/09/12 Javascript
easyUI 实现的后台分页与前台显示功能示例
2020/06/01 Javascript
Python基于jieba库进行简单分词及词云功能实现方法
2018/06/16 Python
python 使用正则表达式按照多个空格分割字符的实例
2018/12/20 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
django 消息框架 message使用详解
2019/07/22 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
python字符串替换re.sub()实例解析
2020/02/09 Python
解决django migrate报错ORA-02000: missing ALWAYS keyword
2020/07/02 Python
热能动力工程毕业生自荐信
2013/11/07 职场文书
30年同学聚会感言
2014/01/30 职场文书
成绩单公证书
2014/04/10 职场文书
音乐节策划方案
2014/06/09 职场文书
物流管理专业自荐信
2014/06/23 职场文书
政风行风整改方案
2014/10/25 职场文书
学生退学证明
2015/06/23 职场文书
商场广播稿范文
2015/08/19 职场文书
大学优秀学生主要事迹材料
2015/11/04 职场文书
Axios取消重复请求的方法实例详解
2021/06/15 Javascript