Как запретить Ax ios добавлять sla sh после baseURL - PullRequest
Новая
       75

Как запретить Ax ios добавлять sla sh после baseURL

0 голосов
/ 28 января 2020

в моем приложении Vue я взял конфигурацию ax ios в отдельный файл config. js.

Содержимое config. js 

import axios from "axios";
const token = localStorage.getItem('user-token');
const baseUrl = `/api/v2.1/document.json&token=${token}&`;

export default () => {
    return axios.create({
        baseURL: baseUrl
    })
}

В моем модуле магазина Vuex formFields. js У меня есть: 

import Api from '../../api/config';

...

const actions = {
    async getApiFields() {
        await Api().get('type=documentType').then(function(response){
            console.log(response);
        }).catch(e => {
            this.errors.push(e)
        });
    }
};

Итак, что не так? Я не знаю, почему топор ios добавить ' /

Request URL: ... / апи / v2.1 / document.json и маркер = eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiI3ZTE2OTk5My00YTJiLTRhYWMtOGNiNi00ZTY0NGY2NjE3NTkiLCJhdWQiOiJNYWVzdHJvTElWRSIsInN1YiI6Ik1hZXN0cm9MSVZFIEFQSSIsImV4cCI6MTU4MDIwMTQ5OSwiaWF0IjoxNTgwMTk3NzE5fQ. PWstAQCDr6Atd_J26futucIBOBUZiFCcp0g5Y1JTYUs & / type = documentType

снимок экрана вкладки сети здесь

Как предотвратить добавление этого sla sh?

1 Ответ

0 голосов
/ 28 января 2020

tl; dr использование топора ios перехватчиков

Проблема с объединением параметров по умолчанию и дополнительных параметров запроса

Использование поля params в объекте конфигурации для axios.create, например 

import axios from "axios";
const token = localStorage.getItem('user-token');
const baseUrl = `/api/v2.1/`

/* Please note, an endpoint should not be part of the BaseURL */

export default () => {
  return axios.create({
    baseURL: baseUrl,
    params : { token : token }
  });
}

/* this will add ?token="XXX" query parameter to the url

import Api from '../../api/config';

/* /document.json is your endpoint, and should not be part of the baseUrl */

const actions = {
  async getApiFields() {
    await Api().get('/document.json').then((response) => {
      console.log(response);
    }).catch(e => {
      this.errors.push(e)
    });
  }
};

Проблема в том, что вы не можете добавить дополнительные параметры запроса, потому что они переопределяют параметры по умолчанию. Таким образом, чтобы решить эту проблему, вы можете добавить перехватчик ax ios, который будет добавлять параметр запроса токена к каждому запросу.

Решение: Использовать ax ios interceptor 

import axios from "axios";
const token = localStorage.getItem('user-token');
const baseUrl = `/api/v2.1/`

const instance = return axios.create({ baseURL: baseUrl });
instance.interceptors.request.use(config => {
  config.params = {
   // add your default ones
   token: token,
   // spread the request's params
    ...config.params,
  };
  return config;
});
export default instance; 

import Api from '../../api/config';

const actions = {
  async getApiFields() {
    await Api().get('/document.json', {params:{type:'documentType'}})
    .then((response) => {
      console.log(response);
    }).catch(e => {
      this.errors.push(e)
    });
  }
};

Использование такого перехватчика создаст запрос (в этом примере), например:

/api/v2.1/document.json?token=XXX&type=documentType

Подробнее о перехватчиках можно прочитать здесь: https://github.com/axios/axios#interceptors

...