Зачем переупаковывать AJAX?

внешний интерфейс Vue.js Ajax axios

предисловие

Некоторые студенты уже напомнили об использованииaxios.create(),использоватьaxios.create()может решить следующее1 、2、3、5Пункт, арендодатель также рекомендует использовать этот метод, так какaxiosуже предоставил такиеAPI, то нет необходимости реализовывать его таким образом, что немного лишнее. Так что эта статья в значительной степени бессмысленна, но она также является хорошим выбором для особых случаев, таких какчетвертая точка, который можно настроить в соответствии с потребностями вашего бизнеса.

Опять такиОбертывание AJAXПреимущества, которые вы не можете себе представить! Будь то для кодаЭффективное управление,ещеСистемный дизайн... преимущества выходят далеко за рамки вашего воображения.

Зачем нужно инкапсулировать

Сначала рассмотрим следующие сценарии приложений, включающие 100 проектов.AJAXпросить,в:

  1. 60 из них должны быть взаголовок запросанастраиватьtoken headers: {token: token}для проверки разрешения;
  2. 20 из нихЗагрузить EXCEL-файлЕго нужно указать в заголовке запроса.Content-Type;
      headers: {
        'Content-Type': `multipart/form-data; boundary=${data._boundary}`
      }
  1. ③ Используются последние 20 запросов获取文件流, вам нужно указать тип принятияresponseType: 'blob'
  2. Нужда вИнициировать запрос глобальнопровестиперехватыватьи делайАсинхронная обработка(подчеркивать:ДаАсинхронная обработка);
  3. Если ваш проект наполовину сделан, теперь серверная часть должнаплюс разрешение токенапройти сертификацию;

1, 2 и 3, упомянутые выше, можно найти вГлобальныйrequestперехватпроцесс, ноочень дорого, нужно для всех 100 интерфейсоввыносить решения, а затем действовать соответственно... ;Конечно, также можно определить каждый интерфейс отдельно без глобального перехвата.Я думаю, что многие студенты до сих пор справляются с этим таким образом.ноПока есть изменения, например, теперь я требую, чтобы все заголовки запросов добавляли параметр, его можно изменить только по одному интерфейсу. Это не тот результат, которого мы хотим, поэтому нам нужноПереупаковка AJAX! Переупаковка AJAX! Переупаковка AJAX!, потому что это очень важно, поэтому я должен сказать это еще несколько раз....

Для четвертого случая, в axios, если вы можете выполнять только некоторые синхронные операции над запросом, если вы делаете асинхронный, вы сообщаете об ошибке напрямую... Но это также можно использоватьОбертывание AJAXреализовать! Это просто черная магия... круто...

Реализация пакета

Упаковка на самом деле очень простая, это оригинальная настоящаяAJAX устанавливает оболочку,оболочкато естьфункция!В этой функции делаются какие-то невидимые? Вы можете делать что угодно. 1, 2, 3, 4 и 5, упомянутые выше, можно сделать здесь спокойно.Связные вызовы AJAXЭто имеет значение? Ответ да:Нет эффекта.Давайте сначала посмотрим на AJAX, который я вызываю в коде:

    _initEditParams () {
      this.$axios('Common/Permission/Get', {Id}).then(res => {
        ....
        ....
      })
    },

не так лиВызов AJAX напрямуютакжекраткий? Да, потому что все элементы конфигурации, такие как метод запроса, помещаются в пакет.

подождите... используется здесьthis.$axiosСпособ называется, вроде ничем не отличается от того, что использую я... Да тут тоже черезVue.prototype.$axios = axiosдобавить вvueглобальный экземпляр, но добавленный здесьaxiosне импортируется напрямуюплагин аксиомЭтометод

import {axios} from './utils/common'
Vue.prototype.$axios = axios

Конечно. Вы также можете не добавлять его в глобальный инстанс, вы можете передать его в компонентеimportСинтаксис введен для использования. Конечно в проектеШироко используемые методы упаковкиИспользовать напрямуюVue.prototypeдобавить вvueпример. Далее посмотримЧто делает метод axios?:

import Axios from 'axios'
import Store from '../vuex'

/*********************************
  ** Fn: axios
  ** Intro: 公用封装的axios  已在main.js中进行 $axios代理
  ** Intro: Store.state.permission.constUrl 为公用的接口前缀地址
  ** Intro: url 方法接受参数 为定义的 接口地址后缀
  ** Intro: data 方法接受参数 为定义的参数
  ** Author: zyx
*********************************/

export function axios (url, data) {
  return new Promise((resolve, reject) => {
    Axios({
      url: `${Store.state.permission.constUrl}${url}`,
      method: 'post',
      data: data,
      headers: {
        token: Store.state.permission.token
      }
    }).then(res => {
      resolve(res)
    }).catch(err => {
      reject(err)
    })
  })
}

Ключевым моментом в этом методе является то, чтоPromise! ТолькоPromiseМожет встретить цепной вызов.PromiseЭто хорошо, конкретноPromiseЯ не буду объяснять здесь грамматику, потому что говорить ее нехорошо.PromiseЕсть три состояния,pending,resolveа такжеreject. Хорошо, что вы можете сохранитьPromiseиметь дело ссостояние ожидания (можно понимать как ожидание), чувствовать себя хорошо, простоresolve()выпуск, в.then()относитесь к этому соответственно. Если у вас плохое настроение, просто прямоreject()перезвони тогда.catch()иметь дело с. (намекать:PromiseЕго также можно использовать для связи между родительскими и дочерними компонентами, используяresolve())

Поддержите его лайком, чтобы поощрить его~

Личная рекомендация других статей:

Категории