axios的全局配置

201 阅读1分钟
/* 全局使用axios */
import axios from 'axios'

/* 给全局的额axios配置了一个基本的地址 */
/* 组件里面的地址只需要写path就可以了 比如this.$axios.post('login',... */
// axios.defaults.baseURL = 'http://timemeetyou.com:8889/api/private/v1/';
// /* 给组件内的所有使用$axios的 请求头上都加上了Authorization和对应的token值 */
// /* 后台会根据你的请求头上的token值来判断你是管理员 还是普通用户,管理员就给管理员应该有的数据
// 普通用户就给普通用户应该给的数据 */
// axios.defaults.headers.common['Authorization'] = 'token123';
// axios.interceptors.request.use(function (config) {
//   console.log('loading......')
//   // 在发送请求之前做些什么
//   return config;
// }, function (error) {
//   // 对请求错误做些什么
//   return Promise.reject(error);
// });
// Vue.prototype.$axios = axios;
/* 上面这种方式 会对所有的组件 都造成影响 */

/* 而下面的创建实例化的方式,只会对使用全局$axios的请求造成影响,
不会对局部使用的axios请求造成影响  */
/* axios创建一个axios实例化对象 */
var instance = axios.create({
  baseURL: 'http://timemeetyou.com:8889/api/private/v1/',
  timeout: 1000,  /*在超时前所有请求都会等待1秒 */
  // headers: {'Authorization': 'token123'}
});

// 添加请求拦截器
/* 顺序是发送请求之前 */
instance.interceptors.request.use(function (config) {
  console.log('loading打开......')
  // config.headers.Authorization = 'token123'
  console.log(config);
  // 在发送请求之前做些什么
  return config;
}, function (error) {
  // 对请求错误做些什么
  console.log('请求error',error);
  return Promise.reject(error);
});

// 添加响应拦截器
/* 顺序是 拿到响应数据之前 */
instance.interceptors.response.use(function (response) {
  console.log('loading关闭')
  // 对响应数据做点什么
  return response.data;
}, function (error) {
  /* 请求状态是404 或者 500 或者failed的状态*/
  // 对响应错误做点什么
  /* console.log('响应error',error); */
  /* 响应拦截 会在组件先一步执行 */
  /* 组件内部也需要catch一下,这样才能阻止报错,方便下面代码执行 */
  return Promise.reject(error);
});

Vue.prototype.$axios = instance;

/* 局部组件 使用 mock数据 使用局部的axios方式 */
/* app组件 使用 登录接口  使用全局的axios方式 */
/* 分别实现 拿到对应的数据 */