Axios在Vue.js的部分使用及它的特点

简介：
基于Promise的Http请求客户端，可以在浏览器和node.js中使用

使用场景：
结合vue.js实现发送请求，拦截请求，拦截相应的功能

特点：
1.基于Promise
2.拦截请求和响应
3.转换请求和响应的数据
4.在node.js中使用

安装：
npm install --save axios
import axios from ‘axios’

结合Vue.js的请求响应拦截器：

// 请求拦截
axios.interceptors.request.use(config => {
  if (config.url.indexOf('/oauth/token?grant_type=password') != -1) {
    config.headers['Authorization'] = 'Basic Y2xpOnNlYw=='
    // config.headers['Content-Type'] = 'application/json;charset-UTF-8'
  } else if (getToken()) {
    config.headers['Authorization'] = 'Bearer ' + getToken() + ''
  }
  return config
}, error => {
  // Do something with request error
  console.log(error) // for debug
  Promise.reject(error)
})

// 响应拦截
axios.interceptors.response.use((res) => {
  if (res.data.code !== '0') {
    switch (res.data.code) {
      case '401':
        window.location.href = '/login'
        break
      case '403':
        Notification.error({
          title: '错误：403',
          message: '访问拒绝'
        })
        break
      case '404':
        Notification.error({
          title: '错误：404',
          message: '找不到网络资源'
        })
        break
      case '500':
        Notification.error({
          title: '错误：500',
          message: res.data.error.errorMsg
        })
        break
    }
  }
  return res.data
}, (err) => {
  if (err.response) {
    switch (err.response.status) {
      case '401':
        window.location.href = '/login'
        break
      case '403':
        Notification.error({
          title: '错误：403',
          message: '访问拒绝'
        })
        break
      case '404':
        Notification.error({
          title: '错误：404',
          message: '找不到网络资源'
        })
        break
      case '500':
        Notification.error({
          title: '错误：500',
          message: '服务器出错'
        })
        break
    }
  }
  return Promise.reject(err)
})

// 请求封装
export default function _axios (method, url, params) {
  method = method.toUpperCase()
  var options = {
    method: method,
    url: url,
    headers: {
      'Content-Type': 'application/json;charset=UTF-8'
    }
  }

  if (method === 'POST' || method === 'PATCH' || method === 'PUT') {
    if (params) {
      options.data = params
    }

    return axios(options)
      .then((res) => {
        return res
      }, (error) => {
        return error
      })
  }

  if (method === 'GET' || method === 'DELETE') {
    if (params) {
      options.params = params
    }

    return axios(options)
      .then((res) => {
        return res
      }, (error) => {
        return error
      })
  }
}