首页 > 编程 > JavaScript > 正文

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

2019-11-19 15:35:08
字体:
来源:转载
供稿:网友

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原型

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表