CODEWITHSUNDEEP
reactjsurlreact-reduxfetch
Asad
Asad

Reputation: 3160

why fetch api adding escape characters in url %E2%80%8B

Im calling fetch api in react service when I give static string to fetch it works fine like following

export const getAll = async (_url) => {
 const requestOptions = {
method: 'GET',
};

 try {
  const response = await fetch(
  process.env.REACT_APP_API_URL + '/api/communications/notifications/',  // like this
  requestOptions
);
    const json = await response.json();
return json;
} catch (error) {
return Promise.reject(error);
}
};

url formed => http://localhost/api/communications/notifications/

but when I pass the string to service from action and use that parameter (_url) it adds escape characters automatically like this

url formed => http://localhost/api/communications%E2%80%8B/notifications%E2%80%8B/

here is my code of action file

import { notificationConstants } from '../constants/header.constants';
import * as ajaxService from '../services/ajax.service';
import { toast } from 'react-toastify';
export const notificationActions = { getAll };
function getAll() {
 return async (dispatch) => {
try {
  const res = await ajaxService.getAll(
    '/api/communications​/notifications​/'
  );
  dispatch(success(res));
} catch (error) {
  dispatch(failure(error.toString()));
   toast.error(error.toString());
  }
 };

function success(notification) {
return { type: notificationConstants.GET_ALL_NOTIFICATION, notification };
}
function failure(error) {
return { type: notificationConstants.GET_ALL_NOTIFICATION, error };
  }
 }

what is issue of this , please help.

update: Ive already tried decodeURIComponent

Upvotes: 2

Views: 2648

Answers (3)

Karol Zlot
Karol Zlot

Reputation: 4035

Answers by @bogdan-damaschin and @Asad works, but if you are curious which letters causes issues, you can paste URL string into this tool:

https://onlineasciitools.com/validate-ascii

Example:

(this string was copied from swagger docs page and contain 4 non-unicode characters)

enter image description here

After editing of URL string:

enter image description here

Upvotes: 0

Asad
Asad

Reputation: 3160

Rewriting the entire string by hand works for me it strange behavior when you copy the string from swagger creating the issue.

Upvotes: 1

bogdan damaschin
bogdan damaschin

Reputation: 61

I had a similar issue. This might sound weird, but rerwite the entire string by hand. It is possible one of the characters is unicode if you copy-pasted the text. Visual code in my case says nothing, shows the caracter the same as always, but if you try to search the caracter in the entire code, you won't find it (as it is a different character).

Upvotes: 5

Related Questions