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

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

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/'

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。