Vue全家桶之axios

安装

• npm install axios -D
• 使用axios
  1. 引入axios，qs(序列化data参数)
  2. 封装 请求[request] 响应[response] 拦截，axios.interceptors.[ request | response ].use()
  3. 封装检验网络状态码、检验接口API状态码
  4. exporst default 暴露
  5. main.js 使用 prototype,变为全局方法。

引入

  import axios from 'axios' ;
  import  qs from 'qs' ;  //序列化请求参数

封装拦截器interceptors

   请求拦截器 
  axios.interceptors.request.use( config => {
      let token  = '...'  ; // 请求头加入token
      if(token){
          config.headers.Authorization = `Bearer ${token}` ;
      }
      return config 
  }, error => Promise.reject(error))  //错误信息
  
   响应拦截器 
  axios.interceptors.response.use((res) =>{
    if(res.data.status_code !== 0){
        // 返回错误
    }
        return res
    }, (error) => {
        return Promise.reject(error)
    });

检验状态码

    function checkStatus(res){
        if( res && (res.status == 200 || res.status == 304 || res.status == 400)){
            return res 
        }
        return {
            status: -404,
            msg: '网络异常'
        }
    }
    
    function checkCode(res){
        if(res.data.status_code !== 0){
            alert(res.data.message) ;
        }
        return res
    }

暴露export default

    export default {
        post(url, data) {
            return axios({
                method: 'post',
                url,
                withCredentials: false,  //表示跨域请求时是否需要使用凭证
                data: qs.stringify(data),
                timeout: 10000
            }).then((res) =>{
                return checkStatus(res) ;
            }).then( (res) => {
                return checkCode(res) ;
            })
        },
        get(url, params){
            return axios({
                method: 'get',
                url,
                params,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                },
                timeout: 3000,
            }).then((res)=>{
                return checkStatus(res) ;
            }).then(res => checkCode(res)) ;
        }
    }

使用

 import http from './xx/http.js'
 Vue.prototype.$http = http ;