在vue中使用axios

1、安装axios

npm install axios --save

2、在main.js中引用

import axios from './api/axios';

Vue.$axios = Vue.prototype.$axios = axios;

或者直接引入get post

import { get, post } from '@/api/axios';
Vue.$get = Vue.prototype.$get = get;
Vue.$post = Vue.prototype.$post = post;

3、添加请求拦截器和响应拦截器(应用：单点登录就需要设置请求拦截器，都带上token)

import axios from "axios";
/* http request
 **请求拦截器
 **在发送请求之前进行的一系列处理,根据项目要求自行配置
 **例如:loading
 */
axios.interceptors.request.use(
  config => {
    // 请求响应时间
    config.timeout = 60 * 1000;
    // config.data = JSON.stringify(config.data)
    config.headers = {
      "Content-Type": "application/x-www-form-urlencoded"
    };
    return config;
  },
  function(error) {
    // 对请求错误做处理
    return Promise.reject(error);
  }
);

/* response
 **响应拦截器
 **允许在数据返回客户端前,修改响应的数据
 **返回体中数据：response.data,如果需要全部,则 return response 即可
 */
axios.interceptors.response.use(
  function(response) {
    return response.data;
  },
  function(error) {
    // 处理响应错误
    if (error && error.response) {
      switch (error.response.status) {
        case 400:
          console.log("错误请求");
          break;
        case 401:
          console.log("未授权,请重新登录");
          break;
        case 403:
          console.log("拒绝访问");
          break;
        case 404:
          console.log("请求错误,未找到该资源");
          break;
        case 405:
          console.log("请求方法未允许");
          break;
        case 408:
          console.log("请求超时");
          break;
        case 500:
          console.log("服务器端出错");
          break;
        case 501:
          console.log("网络未实现");
          break;
        case 502:
          console.log("网络错误");
          break;
        case 503:
          console.log("服务不可用");
          break;
        case 504:
          console.log("网络超时");
          break;
        case 505:
          console.log("http版本不支持该请求");
          break;
        default:
          console.log(`连接错误${error.response.status}`);
      }
    } else {
      console.log("连接到服务器失败");
    }
    return Promise.reject(error);
  }
);

const get = (url, data = {}, success = () => {}, failure = () => {}) => {
  axios
    .get(url, {
      params: data
    })
    .then(resp => {
      if (resp) {
        success && success(resp);
      } else {
        failure && failure("请求失败");
      }
    });
  // .catch((error) => {
  //   if (window.Raven) {
  //     window.Raven.captureException(error)
  //   }
  //   failure && failure('网络不给力，请稍后再试')
  // })
};

const post = (url, data = {}, success = () => {}, failure = () => {}) => {
  let params = new FormData();
  for (var key in data) {
    params.append(key, data[key]);
  }
  axios.post(url, params).then(resp => {
    if (resp) {
      success && success(resp);
    } else {
      failure && failure("请求失败");
    }
  });
  // .catch((error) => {
  //   if (window.Raven) {
  //     window.Raven.captureException(error)
  //   }
  //   failure && failure('网络不给力，请稍后再试')
  // })
};

export default axios;

export { get, post };

4、使用

1种：this.$axios.get()
2中：this.$get()