axios处理请求拦截器,响应拦截器,请求封装

request.js

import axios from 'axios';
import { Message } from 'element-ui';

const service = axios.create({
  baseURL: 'http://192.168.30.110:8008/', 
//   baseURL: 'http://192.168.30.59:8008/', 
  timeout: 10000 // request timeout
});

// http 请求拦截器
service.interceptors.request.use(
  config => {
    const { token } = window;
    if (token) {
      config.headers.token = token;
    }
    return config;
  },
  error => Promise.reject(error)
);

function handleSuccess(response) {
  if (!response.success) {
    let message = response.mes || response.message || response.error;
    message = message.slice(0, 100);
    Message({
      type: 'error',
      duration: 3000,
      message
    });
  }
  return response;
}

// http 响应拦截器
service.interceptors.response.use(
  // eslint-disable-next-line consistent-return
  response => {
    if (response.status <= 299 && response.status >= 200) {
      return handleSuccess(response.data);
    }
    Message({
      type: 'error',
      duration: 3000,
      message: '请求错误'
    });
  },
  error => {
    if (error.response) {
      const { data } = error.response;
      let message = data.message || data.msg || data.error;
      message = message.slice(0, 100);
      Message({
        type: 'error',
        duration: 3000,
        message
      });
    }
    return Promise.reject(error);
  }
);

export default service;

使用:

 this.$request({
                method: 'post',
                url: `paas/api/exe/prod/${this.featureName}/save`,
                data: { 0: [data], extr: {topicId: this.topicId} }
            }).then((res) => {})  .catch((error) => {
                    this.$message({
                        message: '提交失败',
                        type: 'error',
                    })
                    console.log(error)
                })

main.js
直接挂载在vue全局上

import request from '@/utils/request.js';

Vue.prototype.$request = request;
posted @ 2021-01-19 13:44  halfsoul  阅读(340)  评论(0编辑  收藏  举报