Инкапсуляция запросов axios и унифицированная обработка исключений

задняя часть внешний интерфейс

Когда текущий бэкенд отделен, обработка проблем с разрешениями немного отличается от нашей традиционной обработки. Автор как раз несколько дней назад руководил модулем управления правами проекта.Сейчас модуль управления правами завершен.Я хотел бы представить проблемы, возникающие в проекте, и свои решения через 5-6 статей.Надеюсь эта серия может помочь вашим друзьям. Эта серия статей не является практическим руководством. Она в основном знакомит с основными идеями и объясняет основной код. Партнеры по полному коду могут пометить и клонировать их на GitHub для изучения. Кроме того, изначальный план состоял в том, чтобы запустить проект и выложить в интернет для просмотра друзьям, но до покупки сервера для экономии памяти было всего 512М, и два приложения не могли запуститься (есть уже одноПроект с открытым исходным кодом V Tribeработает), поэтому вы можете только взглянуть на скриншоты ниже. На GitHub есть руководства по развертыванию, и вы также можете увидеть полный эффект при локальном развертывании.

адрес проекта:github.com/lenve/vhr

Если в предыдущих статьях мы в основном решили проблему на стороне сервера, то в этой статье мы в основном говорим об инкапсуляции внешних сетевых запросов.

Эта статья является четвертой в этой серии, рекомендуется сначала прочитать предыдущие статьи, чтобы лучше понять эту статью:

1.SpringBoot+Vue разделяет переднюю и заднюю части и использует SpringSecurity для идеального решения проблем с разрешениями (1)
2.SpringBoot+Vue разделяет переднюю и заднюю части и использует SpringSecurity для идеального решения проблем с разрешениями (2)
3.Соление пароля в SpringSecurity и обработка исключений в SpringBoot

Инкапсуляция внешних сетевых запросов

Внешний интерфейс использует axios для обработки сетевых запросов.Чтобы не оценивать различные сетевые условия каждый раз, когда делается запрос, например, время ожидания соединения, внутренние ошибки сервера, недостаточные разрешения и т. д., я сделал простой пакет axios, здесь в основном использует функцию перехватчика в axios.

Инкапсулированный инструмент сетевого запроса js выглядит следующим образом:

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

axios.interceptors.request.use(config=> {
  return config;
}, err=> {
  Message.error({message: '请求超时!'});
  return Promise.resolve(err);
})
axios.interceptors.response.use(data=> {
  if (data.status && data.status == 200 && data.data.status == 'error') {
    Message.error({message: data.data.msg});
    return;
  }
  return data;
}, err=> {
  if (err.response.status == 504||err.response.status == 404) {
    Message.error({message: '服务器被吃了⊙﹏⊙∥'});
  } else if (err.response.status == 403) {
    Message.error({message: '权限不足,请联系管理员!'});
  }else {
    Message.error({message: '未知错误!'});
  }
  return Promise.resolve(err);
})

let base = '';

export const postRequest = (url, params) => {
  return axios({
    method: 'post',
    url: `${base}${url}`,
    data: params,
    transformRequest: [function (data) {
      let ret = ''
      for (let it in data) {
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
      }
      return ret
    }],
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  });
}
export const uploadFileRequest = (url, params) => {
  return axios({
    method: 'post',
    url: `${base}${url}`,
    data: params,
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  });
}
export const putRequest = (url, params) => {
  return axios({
    method: 'put',
    url: `${base}${url}`,
    data: params,
    transformRequest: [function (data) {
      let ret = ''
      for (let it in data) {
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
      }
      return ret
    }],
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  });
}
export const deleteRequest = (url) => {
  return axios({
    method: 'delete',
    url: `${base}${url}`
  });
}
export const getRequest = (url) => {
  return axios({
    method: 'get',
    url: `${base}${url}`
  });
}

Сообщение об ошибке после инкапсуляции очевидно для всех, здесь нечего сказать, единственное, что мне нужно сказать, это то, что при возникновении ошибки я выполняю следующее:Promise.resolve(err);, вместоPromise.reject(err);

Что является причиной этого? Поскольку важной целью инкапсуляции axios является надежда на единую обработку ошибок, вместо обработки различных исключений каждый раз, когда инициируется сетевой запрос, все исключения обрабатываются единообразно в инструменте js. Но этот метод также приносит проблему, то есть, когда я инициирую сетевой запрос, я обычно включаю индикатор выполнения.Когда сетевой запрос заканчивается, независимо от того, был ли запрос успешным или неудачным, я должен закрыть индикатор выполнения и завершиться ошибкой. Я написал всю обработку в инструменте js, поэтому индикатор выполнения не закрывается при сбое запроса.Для решения этой проблемы есть два решения:

1. Открыть полноэкранную загрузку прямо в перехватчике запроса, а потом закрыть в перехватчике ответа, то есть я тоже инкапсулирую прогресс бар в инструмент js, но этот способ не рекомендуется из-за этого Пользователь опыт использования этого метода очень скудный, и заинтересованные друзья могут попробовать его на себе.

2. Второе решение, которое все видят, я возвращаюPromise.resolve(err), тогда запрос не закончится здесь, у меня выскочило неправильное сообщение, но сообщение будет продолжать передаваться затем, то есть, будет ли запрос успешным или нет, я могу получить его в Уведомлениях об успешном обратном вызове, поэтому я могу отключить загрузку, например, следующий запрос на вход:

var _this = this;
this.loading = true;
this.postRequest('/login', {
    username: this.loginForm.username,
    password: this.loginForm.password
}).then(resp=> {
    _this.loading = false;
    if (resp && resp.status == 200) {
    _this.getRequest("/config/hr").then(resp=> {
        if (resp && resp.status == 200) {
        var data = resp.data;
        _this.$store.commit('login', data);
        var path = _this.$route.query.redirect;
        _this.$router.replace({path: path == '/' || path == undefined ? '/home' : path});
        }
    })
    }
});

Добавить Vue-плагин

Поскольку я инкапсулировал аксиомы, мне нужно импортировать соответствующий запрос во все места, где нужно использовать аксиомы, что немного хлопотно, см.cn.vuejs.org/v2/guide..., я подключил метод запроса к Vue следующим образом:

1. Импортируйте все методы запроса в main.js следующим образом:

import {getRequest} from './utils/api'
import {postRequest} from './utils/api'
import {deleteRequest} from './utils/api'
import {putRequest} from './utils/api'

2. Добавьте их в Vue.prototype следующим образом:

Vue.prototype.getRequest = getRequest;
Vue.prototype.postRequest = postRequest;
Vue.prototype.deleteRequest = deleteRequest;
Vue.prototype.putRequest = putRequest;

После этого, если вам в будущем потребуется отправлять сетевые запросы, вам не нужно импортировать API, вы можете напрямую использовать следующий метод:

this.postRequest('/login', {
    username: this.loginForm.username,
    password: this.loginForm.password
}).then(resp=> {
    ...
    }
});

Хорошо, после этого обработка сетевых запросов становится такой простой.

Подпишитесь на официальный аккаунт, чтобы вовремя получать свежие статьи:

Категории