Перехватчики Ax ios не отправляют данные в API в производственном приложении Heroku - PullRequest
Новая
       27

Перехватчики Ax ios не отправляют данные в API в производственном приложении Heroku

0 голосов
/ 27 марта 2020

Это вторая часть моей отладки моего приложения на производстве

В часть 1 мне удалось, по крайней мере, увидеть причину моей проблемы и решить ее.

Когда я отправляю запрос в мой API, который размещен на Heroku с использованием перехватчика ax ios , каждый отдельный объект запроса выглядит следующим образом в API 

{ 'object Object': '' }

Перед отправкой данных в API, я console.log () transformRequest по оси ios и вижу, что данные, которые я отправляю, действительно есть.

Примечание : Я протестировал этот процесс, просто используя 


axios.<HTTP_METHOD>('my/path', myData)

// ACTUAL EXAMPLE
await axios.post(
        `${process.env.VUE_APP_BASE_URL}/auth/login`,
        userToLogin
      );

, и все работает, и я получаю данные обратно с сервера.

Хотя это здорово и все, я хотел бы абстрагироваться от моего request реализация в отдельный класс, как я делал ниже.

Кто-нибудь знает, почему перехватчик вызывает эту проблему? Я неправильно его использую?

request.ts 

import axios from "axios";
import { Message } from "element-ui";
import logger from "@/plugins/logger";
import { UsersModule } from "@/store/modules/users";

const DEBUG = process.env.NODE_ENV === "development";

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_URL,
  timeout: 5000,
  transformRequest: [function (data) {
    console.log('data', data)
    return data;
  }],
});

service.interceptors.request.use(
  config => {

    if (DEBUG) {
      logger.request({
        method: config.method,
        url: config.url
      });
    }

    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

service.interceptors.response.use(
  response => {
    console.log('axios interception response', response)
    return response.data;
  },
  error => {
    const { response } = error;
    console.error('axios interception error', error)

    if (DEBUG) {
      logger.error(response.data.message, response);
    }

    Message({
      message: `Error: ${response.data.message}`,
      type: "error",
      duration: 5 * 1000
    });

    return Promise.reject({ ...error });
  }
);

export default service;

Логин. vue

/**
   * Sign user in
   */
  async onClickLogin() {
    const userToLogin = {
      username: this.loginForm.username,
      password: this.loginForm.password
    };

    try {
      const res = await UsersModule.LOGIN_USER(userToLogin);
      console.log("res", res);
      this.onClickLoginSuccess();
    } catch (error) {
      throw new Error(error);
    }
  }

UsersModule (VUEX Store) 

  @Action({ rawError: true })
  async [LOGIN_USER](params: UserSubmitLogin) {
    const response: any = await login(params);
    console.log('response in VUEX', response)
    if (typeof response !== "undefined") {
      const { accessToken, username, name, uid } = response;

      setToken(accessToken);
      this.SET_UID(uid);
      this.SET_TOKEN(accessToken);
      this.SET_USERNAME(username);
      this.SET_NAME(name);
    }
  }

пользователи API класса 

export const login = async (data: UserSubmitLogin) => {
  return await request({
    url: "/auth/login",
    method: "post",
    data
  });
};

1 Ответ

1 голос
/ 27 марта 2020

Я не уверен, что вы пытаетесь сделать с transformRequest, но это, вероятно, не то, что вы хотите.

Цитата из документации, https://github.com/axios/axios#request -config :

Последняя функция в массиве должна возвращать строку или экземпляр Buffer, ArrayBuffer, FormData или Stream

Если вы просто возвращаете нормальный JavaScript объект вместо этого будет искажен так, как вы наблюдали.

transformRequest отвечает за принятие значения data и преобразование его во что-то, что действительно может быть отправлено по проводам. Реализация по умолчанию выполняет довольно много работы, манипулируя data и устанавливая соответствующие заголовки, в частности Content-Type. См .:

https://github.com/axios/axios/blob/885ada6d9b87801a57fe1d19f57304c315703079/lib/defaults.js#L31

Если вы укажете свой собственный transformRequest, то вы замените это значение по умолчанию, поэтому ничего из этого не произойдет автоматически.

Не зная, что вы пытаетесь сделать, трудно посоветовать дальше, но вам, вероятно, следует использовать перехватчик запросов вместо transformRequest для всего, что вы пытаетесь сделать.

...