博客

axios全局配置

import axios from 'axios';
export const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_URL   //配置axios请求的地址
})
//post请求的请求头
service.defaults.headers.post['Content-Type'] = 'application/json';

拦截器：请求之前拦截，请求后对返回数据拦截。
应用场景：
1、每个请求都带上的参数，比如token，时间戳等。
2、对返回的状态进行判断，比如token是否过期，统一判断返回码等。

//axios请求拦截器
service.interceptors.request.use(
  config => {
    if (localStorage.getItem('token')) {
    	//token字段是要和后端协商好的
    	config.headers.common["token"] = localStorage.getItem('token');
    }
    if (config.method == 'get') {
      // 时间戳,防止ie 缓存get方法
      config.params = {
        t: Date.parse(new Date()) / 1000,
        ...config.params
      }
    }
    return config;
  },
  error => {
    return Promise.reject(error);   //在axios的catch中写入报错后回调
  }
);

//响应拦截
service.interceptors.response.use(
  response => {
    let err_text = ''
    if (response.status === 200) {
      if (response.data.err_code === 0) {
        return Promise.resolve(response)
      } else {
        // 根据返回的code值来做不同的处理（和后端约定）
        switch (response.data.err_code) {
          case 2101:
            err_text = '用户不存在或停用';
            break;
          default:
            err_text = response.data.msg
            Notify.clear()
            Notify({ type: 'warning', message: err_text || '服务正在维护，请等待......' });
        }
        return Promise.reject(response);
      }
    }
  },
  error => {
    //其他异常
    if (error && error.response) {
      Notify.clear()
      switch (error.response.status) {
        case 400:
          Notify({ type: 'warning', message: `${error.response.data.message || error.response.data.msg}` });
          break;
        default:
          Notify({ type: 'warning', message: '服务异常！' });
      }
    }
    return Promise.reject(error);   //在axios的catch中写入报错后回调
  }
)

最后，将service抛出

export default service

如何引入？

在main.js中全局引入

//全局配置axios及拦截器
import { get, post, service } from './assets/js/http.js';
Vue.prototype.$axios = service

页面使用

//get
this.$axios.get(process.env.VUE_APP_PRO_SEVER_NAME + '/api/project/list', {
    params: {
		"projectName": '',
	},
    headers: {
       pageNo: 1,
       pageSize: 20,
    }
}).then((res) => {
     
})

//post
this.$axios.post(process.env.VUE_APP_PRO_SEVER_NAME + '/api/contract/save',
  {
    "contractNo": 1111,
    "customerId": 2231
  },
).then((res) => {
	 
})

//put
this.$axios.put(process.env.VUE_APP_PRO_SEVER_NAME + '/api/contract/status',
   {
     "contractId": 344
   }
).then((res) => {
    
})

//delete
this.$axios.delete('/intelctrl-project/api/project', {
    params: {
      projectId: 1111
    }
}).then((res) => {
    
})

http.js全部代码

/**axios封装
 * 请求拦截、
 */
import axios from 'axios';
import QS from 'qs';
import { Message } from 'element-ui'
import { MessageBox } from 'element-ui';
import store from '@/store'

import { localStorageClear } from '@/assets/js/public.js'
const CancelToken = axios.CancelToken;
const source = CancelToken.source();

export const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_URL,
  //baseURL: 'https://gateway.hjlcps.com/',
  //baseURL: 'http://39.102.57.150:9500/',
  //timeout: 1000
})
//是否正在请求二token
var loadRefreshToken = false
//请求头
service.defaults.headers.post['Content-Type'] = 'application/json';
//请求拦截器
service.interceptors.request.use(

  config => {
    // 全局添加cancelToken
    config.cancelToken = source.token;
    if (localStorage.getItem('token')) {
      //token
      config.headers.common["token"] = localStorage.getItem('token');
    }
    if (config.method == 'get') {

      // 时间戳,防止ie 缓存get方法
      config.params = {
        t: Date.parse(new Date()) / 1000,
        ...config.params
      }
    }
    // 如果params传值是数组类型如arr=[1,2]，则转换成arr=1&arr=2
    config.paramsSerializer = function (params) {
      return QS.stringify(params, { arrayFormat: 'repeat' })
    }
    return config;
  },
  error => {
    store.commit('changeLoading', false) //关闭loading组件
    return Promise.reject(error);
  });
//响应拦截器
service.interceptors.response.use(response => {
  let err_text = ''
  if (response.status === 200) {
    if (response.data.err_code === 0) {
      if (loadRefreshToken) {
        loadRefreshToken = false
        localStorage.setItem('refreshToken', response.data.data.refreshToken)
        localStorage.setItem('token', response.data.data.token)

        setTimeout(() => {
          location.reload();
        }, 0);
      }
      return Promise.resolve(response)
    } else {
      switch (response.data.err_code) {
        //无菜单权限
        case 2118:
          MessageBox.alert('没有查看权限', {
            confirmButtonText: '确定',
            type: 'warning',
            showClose: false
          }).then(() => {
            window.localStorage.setItem('activeParentPerms', '')
          })
          break;
        //无操作权限
        case 401:
          MessageBox.alert(response.data.msg, {
            type: 'warning',
          }).then(() => { })
          break;

        case 91004403:
          //token过期

          if (!loadRefreshToken) {
            loadRefreshToken = true
            console.log('更新token')
            service({
              url: process.env.VUE_APP_BASE_URL + 'intelctrl-user/refreshToken',
              params: { "refreshToken": localStorage.getItem('refreshToken') },
              method: 'get'
            })
          }
          break;
        case 91014403:
          //refreshToken过期
          //取消其他的接口调用
          //source.cancel();
          MessageBox.alert(response.data.msg, {
            confirmButtonText: '重新登录',
            type: 'warning',
            showClose: false
          }).then(() => {
            localStorageClear()
            location.reload();
          })
          break;
        case 2306:
          err_text = '用户组下有用户存在，是否删除';
          break;
        default:
          err_text = response.data.msg
          Message.closeAll()
          Message.error(err_text || '服务正在维护，请等待......');
      }
      store.commit('changeLoading', false) //关闭loading组件
      return Promise.reject(response);
    }
  }
},
  error => {

    //其他异常
    if (error && error.response) {
      Message.closeAll()

      switch (error.response.status) {
        case 400:
          Message.error(`${error.response.data.message || error.response.data.msg}`);
          break;
        default:
          Message.error('服务异常！');
      }

    }
    //关闭loading组件
    store.commit('changeLoading', false)
    //抛出异常
    return Promise.reject(error);

  })
/**  get方法，对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function get(url, params) {
  return new Promise((resolve, reject) => {
    service.get(url, {
      params: params
    })
      .then(res => {
        resolve(res.data);
      })
      .catch(err => {
        /* reject(err.data) */
        console.log('这是http.js页面报的错3:' + err.data)
      })
  });
}
/**
 * post方法，对应post请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function post(url, params) {
  return new Promise((resolve, reject) => {
    service.post(url, QS.stringify(params))
      .then(res => {
        resolve(res.data);
      })
      .catch(err => {
        /* reject(err.data) */
        console.log('这是http.js页面报的错:' + err.data)
      })
  });
}

export default service