Axios新实例和vue、elenemt-ui结合使用

• 创建新的Axios实例

创建新的Axios实例

大致思想是创建一个新的Js文件，并在需要的地方引用这个新的实例

创建Js文件

创建一个名为http.js的文件，文件代码

// 引入axios
import axios from 'axios'

// 创建新的axios实例
var $http
// 配置请求地址
$http = axios.create({
    baseURL: 'http://127.0.0.1'
})

// 添加请求拦截器
$http.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  //设置公有token
  $http.defaults.headers.common['H-TOKEN'] = '我的tokey'
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
$http.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  // 如果是错误返回  这里可以统一抛出错误
  return response;
}, function (error) {
  // 对响应错误做点什么
  // 异常处理
  return Promise.reject(error);
});
//导出$http
export default $http

引用实例

import $http from '地址/http'

// 下面就可以使用跟axios同样的操作了
$http.get()
$http.post()
...

完整实例(Vue,element-ui)

同Vue、element-ui结合使用

import axios from 'axios'
import { Message } from 'element-ui';
import router from '../router/index'

var $http
// 添加一个新的axios实例
$http = axios.create({
  baseURL: 'http://127.0.0.1'
})


// 添加请求拦截器
$http.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  var userInfo = localStorage.getItem('userInfo')
  var user = userInfo ? JSON.parse(userInfo) : {token: ''}
  $http.defaults.headers.common['H-TOKEN'] = user.token
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
$http.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  if (response.data.response === 'error') {
    Message({
      type: 'error',
      message: response.data.message
    })
    if (response.data.code == '0812') {
      // router.push({name: 'login'})
    }
  }
  return response;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});
export default $http

axios手册

axios手册

来源

文章来源