vue官方推薦使用 axios發(fā)送請(qǐng)求

首先上需求

1.需要封裝全局調(diào)用
2.返回一個(gè)promise對(duì)象
3.錯(cuò)誤全局統(tǒng)一處理
4.除了登錄界面token帶入頭部
5.登錄時(shí)候把用戶信息自動(dòng)存到vuex里面

首先上封裝代碼

/** * User: sheyude * Date: 2017/8/23 0023 * Time: 下午 13:15 * */import axios from 'axios';// 導(dǎo)入配置文件 配置文件就導(dǎo)入的請(qǐng)求的前綴地址import {defaults} from '@/config/'import storage from './storage'// 這是一個(gè)餓了么的彈框import { Message } from 'element-ui';//路由配置import router from '@/router'/** * 封裝的全局ajax請(qǐng)求 */class Axios{  constructor (){    this.init();  };  /**   * 初始化   */  init(){    axios.defaults.baseURL = defaults.baseURL;  };  _setUserInfo(data){    // 把請(qǐng)求的數(shù)據(jù)存入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;    }  }  /**   * 判斷是否返回?cái)?shù)據(jù)   * @param data 接收到的數(shù)據(jù)   * @returns {boolean}   * @private   */  _isStatus(data){    if(data.code == 100){      router.push('/login');      Message.error(data.message || '請(qǐng)重新登錄！');      return false    }else{      return true    }  }  /**   * 全局錯(cuò)誤處理   * @param data 傳入錯(cuò)誤的數(shù)據(jù)   * @private   */  _error(data){    console.log(data)    Message.error('網(wǎng)絡(luò)錯(cuò)誤！');  }  /**   * GET 請(qǐng)求 {es6解構(gòu)賦值}   * @param type 包含url信息   * @param data 需要發(fā)送的參數(shù)   * @returns {Promise}   * @constructor   */  HttpGet({url},data) {    console.log(data)    // 創(chuàng)建一個(gè)promise對(duì)象    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 請(qǐng)求   * @param type Object 包含url信息   * @param data Object 需要發(fā)送的參數(shù)   * @param urlData Object 需要拼接到地址欄的參數(shù)   * @returns {Promise}   * @constructor   */  HttpPost({url},Data,urlData){    // 判斷是否加頭部    this._isLogin(url);    // 創(chuàng)建一個(gè)promise對(duì)象    this.promise = new Promise((resolve, reject)=> {      for(const item in urlData){        url += '/' + urlData[item];      };      axios.post(url,Data)        .then((data) => {          // 是否請(qǐng)求成功          if(this._isStatus(data.data)){            // 是否需要存數(shù)據(jù)            if(this._isLogin(url)){              this._setUserInfo(data.data)            };            resolve(data.data)          };        })        .catch((data) =>{          this._error(data);        })    })    return this.promise;  };};export default new Axios();