집 > 기사 > 웹 프론트엔드 > vue는 axios와 캡슐화를 사용합니다.

vue는 axios와 캡슐화를 사용합니다.

php中世界最好的语言원래의: 2018-04-18 14:05:402831검색

이번에는 Vue에서 Axios와 Encapsulation을 사용할 때 주의사항에 대해 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

먼저 요구사항을 생각해 보세요

1. 전역 호출을 캡슐화해야 합니다
2. Promise 객체 반환
3. 오류는 전역적으로 처리됩니다
4. 로그인 인터페이스 토큰 외에도 헤더에 토큰이 가져옵니다
5. 로그인 시 사용자 정보가 자동으로 vuex에 저장됩니다

먼저 캡슐화 코드를 업로드하세요

<strong>/**<br> * User: sheyude<br> * Time: 下午 13:15<br> *<br> */<br>import axios from 'axios';<br>// 导入<a href="http://www.php.cn/code/10545.html" target="_blank">配置文件</a> 配置文件就导入的请求的前缀地址<br>import {defaults} from '@/config/'<br>import storage from './storage'<br>// 这是一个饿了么的弹框<br>import { Message } from 'element-ui';<br>//<a href="http://www.php.cn/code/8586.html" target="_blank">路由</a>配置<br>import router from '@/router'<br>/**<br> * 封装的全局ajax请求<br> */<br>class Axios{<br>  constructor (){<br>    this.init();<br>  };<br>  /**<br>   * 初始化<br>   */<br>  init(){<br>    axios.defaults.baseURL = defaults.baseURL;<br>  };<br>  _setUserInfo(data){<br>    // 把请求的数据存入vuex<br>    store.commit('setUserInfo',data);<br>  /**<br>   * 判断是否是登录<br>   * @param url<br>   * @<a href="http://www.php.cn/wiki/135.html" target="_blank">return</a>s {boolean}<br>   * @private<br>   */<br>  _isLogin(url){<br>    if(url != '/app/login'){<br>      axios.defaults.headers = {'x-token': store.state.user.user.token.token};<br>      return false;<br>    }else{<br>      return true;<br>    }<br>  }<br> <br>  /**<br>   * 判断是否返回数据<br>   * @param data 接收到的数据<br>   * @returns {boolean}<br>   * @private<br>   */<br>  _isStatus(data){<br>    if(data.code == 100){<br>      router.push('/login');<br>      Message.error(data.message || '请重新登录！');<br> <br>      return false<br>    }else{<br>      return true<br>    }<br>  }<br>  /**<br>   * 全局<a href="http://www.php.cn/code/4817.html" target="_blank">错误处理</a><br>   * @param data 传入错误的数据<br>   * @private<br>   */<br>  _error(data){<br>    console.log(data)<br>    Message.error('网络错误！');<br>  }<br> <br>  /**<br>   * GET 请求 {es6解构赋值}<br>   * @param type 包含url信息<br>   * @param data 需要发送的参数<br>   * @returns {Promise}<br>   * @constructor<br>   */<br>  HttpGet({url},data) {<br>    console.log(data)<br>    // 创建一个promise对象<br>    this._isLogin(url)<br>    this.promise = new Promise((resolve, reject)=> {<br>      axios.get(url,{params:data})<br>        .then((data) => {<br>        // console.log(data)<br>          if(this._isStatus(data.data)){<br>            resolve(data.data);<br>          }<br>        })<br>        .catch((data) =>{<br>          this._error(data);<br>        })<br>    })<br>    return this.promise;<br>  };<br>  /**<br>   * POST 请求<br>   * @param type <a href="http://www.php.cn/wiki/60.html" target="_blank">Object</a> 包含url信息<br>   * @param data Object 需要发送的参数<br>   * @param urlData Object 需要拼接到地址栏的参数<br>   * @returns {Promise}<br>   * @constructor<br>   */<br>  HttpPost({url},Data,urlData){<br> <br>    // 判断是否加头部<br>    this._isLogin(url);<br>    // 创建一个promise对象<br>    this.promise = new Promise((resolve, reject)=> {<br>      for(const item in urlData){<br>        url += '/' + urlData[item];<br>      };<br>      axios.post(url,Data)<br>        .then((data) => {<br> <br>          // 是否请求成功<br>          if(this._isStatus(data.data)){<br>            // 是否需要存数据<br>            if(this._isLogin(url)){<br>              this._setUserInfo(data.data)<br>            };<br>            resolve(data.data)<br>          };<br>        })<br>        .catch((data) =>{<br>          this._error(data);<br>        })<br>    })<br>    return this.promise;<br>  };<br>};<br>export default new Axios();</strong>

호출방법

this.$axios.HttpPost(this.audit.auditGet,this.params)
 .then((data) => {
    this.pageData = data.data
 })

2개의 매개변수 수신

1 URL 주소
2 전달해야 하는 매개변수

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!