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实现上传图片并预览的效果实现代码
Apr 11 Javascript
javascript中有趣的反柯里化深入分析
Dec 05 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
Jun 15 Javascript
JavaScript验证Email(3种方法)
Sep 21 Javascript
js利用正则表达式检验输入内容是否为网址
Jul 05 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
Dec 05 Javascript
react系列从零开始_简单谈谈react
Jul 06 Javascript
vue loadmore组件上拉加载更多功能示例代码
Jul 19 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
Aug 15 Javascript
解决VUE中document.body.scrollTop为0的问题
Sep 15 Javascript
微信小程序实现两个页面传值的方法分析
Dec 11 Javascript
JavaScript中的宏任务和微任务详情
Nov 27 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
php 判断访客是否为搜索引擎蜘蛛的函数代码
2011/07/29 PHP
PHP中使用strpos函数实现屏蔽敏感关键字功能
2014/08/21 PHP
Symfony2框架学习笔记之表单用法详解
2016/03/18 PHP
PHP获取当前系统时间的方法小结
2018/10/03 PHP
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
2011/04/07 Javascript
ScrollDown的基本操作示例
2013/06/09 Javascript
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
js读取配置文件自写
2014/02/11 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
2014/05/28 Javascript
JavaScript中判断数据类型的方法总结
2016/05/24 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
2016/12/26 Javascript
JavaScript之underscore_动力节点Java学院整理
2017/07/03 Javascript
nodejs操作mongodb的填删改查模块的制作及引入实例
2018/01/02 NodeJs
解决iView中时间控件选择的时间总是少一天的问题
2018/03/15 Javascript
浅谈vue限制文本框输入数字的正确姿势
2019/09/02 Javascript
vue组件创建的三种方式小结
2020/02/03 Javascript
vue点击标签切换选中及互相排斥操作
2020/07/17 Javascript
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
Python分治法定义与应用实例详解
2017/07/28 Python
使用python 的matplotlib 画轨道实例
2020/01/19 Python
python lambda函数及三个常用的高阶函数
2020/02/05 Python
python实现微信打飞机游戏
2020/03/24 Python
Python网页解析器使用实例详解
2020/05/30 Python
Python生成并下载文件后端代码实例
2020/08/31 Python
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
AVON雅芳官网:世界上最大的美容化妆品公司之一
2016/11/02 全球购物
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
联想德国官网:Lenovo Germany
2018/07/04 全球购物
阿巴庭院:Abba Patio
2019/06/18 全球购物
G-Form护具官方网站:美国运动保护装备
2019/09/04 全球购物
自动化工程专业个人应聘自荐信
2013/09/26 职场文书
村级换届选举方案
2014/05/10 职场文书
期末复习计划
2015/01/19 职场文书
使用Navicat Premium工具将oracle数据库迁移到MySQL
2021/05/27 Oracle
解决vue自定义组件@click点击失效问题
2022/04/30 Vue.js