vue拦截器及地址解释

一、获取地址信息

https://www.cnblogs.com/AiMuzi/p/6652825.html

window.location

 

示例：

http://www.home.com:8080/windows/location/page.html?ver=1.0&id=timlq#love

 

1, window.location.href　　整个URl字符串(在浏览器中就是完整的地址栏) 

返回值：http://www.home.com:8080/windows/location/page.html?ver=1.0&id=timlq#love

 

2,window.location.protocol　　URL 的协议部分 

返回值：http:

 

3,window.location.host　　URL 的主机部分

返回值：www.home.com

 

4.window.location.hostname        

返回值：www.home.com:8080

 

5,window.location.port　　URL 的端口部分。如果采用默认的80端口(update:即使添加了:80)，那么返回值并不是默认的80而是空字符。 

本例返回值:8080

 

6,window.location.pathname　　URL 的路径部分(就是文件地址)

 返回值：/windows/location/page.html

 

7,window.location.search　　查询(参数)部分。除了给动态语言赋值以外，我们同样可以给静态页面,并使用javascript来获得相信应的参数值

 返回值：?ver=1.0&id=timlq

 

8,window.location.hash　　锚点

 返回值：#love

 

二、一个拦截器

import axios from 'axios'

import vm from '../main'

import Vue from 'vue'



/* 全局默认配置 */

const MOCK_URL = 'http://10.0.1.49:8288'

// const MOCK_URL = 'https://mock.mhealth100.com/mock/107'

var http = axios.create({

  baseURL: process.env.NODE_ENV === 'production' ?window.location.protocol + '//' + window.location.host: MOCK_URL

})

/* 请求拦截器 */

http.interceptors.request.use(async config => {

  config.headers['Content-Type'] = 'application/json'

  var token = sessionStorage.getItem('token')

  config.headers['Authorization'] = token

  if (config.loading === true) {

    vm.$vux.loading.show({

      text: ''

    })

  }

  return config

}, error => {

  vm.$vux.loading.hide()

  return Promise.reject(error)

})

/* 响应拦截器 */

http.interceptors.response.use(response => {

  vm.$vux.loading.hide()

  /* resultCode不等于20000时：50011:ticket过期 跳缺省页；50008: token为空或token非法；

     50013：接口未提供；data为空，需要点击重试；

  *  其他直接报错误信息 */

  if (response && response.data.resultCode !== 20000) {

    if (!response.data) {

      console.log('需要重试')

      Vue.prototype.$showTip({

        littleTipMessage: '服务错误',

        type: 'fail'

      })

      return response

    } else if (response.data.resultCode === 50013) {

      console.log('接口未提供')

      return response

    } else if (response.data.resultCode === 50004) {

      console.log('没有数据啊啊啊')

      return response

    } else if (response.data.resultCode === 50011) {

      vm.$router.replace({

        path: '/login-expire'

      })

    } else if (response.data.resultCode === 50010) {

      vm.$router.replace({

        path: '/service-busy-error'

      })

    } else if (response.data.resultCode === 50008) {

      Vue.prototype.$showTip({

        littleTipMessage: '获取token失败',

        type: 'fail'

      })

    } else if (response.data.resultCode === '0') {

      return response

    } else {

      Vue.prototype.$showTip({

        littleTipMessage: response.data.resultDesc,

        type: 'fail'

      })

    }

    return false

  } else {

    /* resultCode等于20000 */

    return response

  }

}, error => {

  vm.$vux.loading.hide()

  return Promise.reject(error)

})



function get (url, data) {

  url = url + getUrl(data)

  return new Promise((resolve, reject) => {

    http.get(url)

      .then(response => {

        resolve(response.data)

      }, err => {

        reject(err)

      })

      .catch((error) => {

        reject(error)

      })

  })

}



function post (url, data, loading) {

  return new Promise((resolve, reject) => {

    http.post(url, data, {loading: loading})

      .then(response => {

        resolve(response.data)

      }, err => {

        Vue.prototype.$showTip({

          littleTipMessage: '服务错误',

          type: 'fail'

        })

        reject(err)

      })

      .catch((error) => {

        reject(error)

      })

  })

}



function getUrl (data) {

  var str = ''

  for (var key in data) {

    str = str + '/' + String(data[key])

  }

  return str

}



function put (url, data) {

  return new Promise((resolve, reject) => {

    axios.put(url, data)

      .then(response => {

        resolve(response.data)

      }, err => {

        reject(err)

      })

      .catch((error) => {

        reject(error)

      })

  })

}



function del (url, data) {

  return new Promise((resolve, reject) => {

    url = url + getUrl(data)

    http.delete(url)

      .then(response => {

        resolve(response.data)

      }, err => {

        reject(err)

      })

      .catch((error) => {

        reject(error)

      })

  })

}



export { get, post, put, del }

 

import { get, post, put, del } from './JS/interceptor'



Vue.prototype.axios = { get, post, put, del }