DEV Community: christian0125

Answer: How can I re-call API in case of axios intercepter error

christian0125 — Sat, 23 Jul 2022 15:57:09 +0000

Jul 23 '22

After some days of investigating my code, I finally found the answer.

Let me write my code and hope it will be helpful.


let refreshToken
if (tokenParts.exp > now) {
            try {
                if (!refreshToken) {
                    refreshToken = service.post('/authentication/token/refresh/', {refresh: refresh_token}).then(token => {
                        refreshToken = null;
                        return token;
                    });
                }

…

Open Full Answer

How can I re-call API in case of axios intercepter error

christian0125 — Sat, 16 Jul 2022 22:12:56 +0000

Jul 15 '22 Comments: 1 Answers: 0

I am developing react project using JWT authentication and write this code.

const service = axios.create({
  baseURL: API_BASE_URL
  timeout: 60000
});

service.interceptors.response.use( (response) => {
    return response.data
}, async (error) => {

        const originalRequest = error.config;
    
    // Remove token and redirect 
    if (error.response.status === 400 || error.response.status === 403) {

…

Open Full Question

When to use Object.assign(), spread operator for array state of React app.

christian0125 — Sat, 07 Aug 2021 15:46:25 +0000

I have a functional react component which receives a random message object regularly. It displays the new added item properly. After I delete one item and received a new message, deleted item remains again. I solved by using Object.assign(), but not sure why spread operator is not working.

I think spread operator copies array. I have been using spread operator when adding new item to array state variable. When to use Object.assign(), when to use spread operator?

Here is my code.

const myComp = props => {
  const [messages, setMessages] = useState([]);
  const [api] = useState(new Api({
    messageCallback: (msg) => {
      handleCallback(msg);
    },
  }));

  useEffect(()=>{
    api.start();
  },[])

  const handleCallback = msg => {
    messages.push(msg);
    setMessages([...messages]);
  }

  const deleteItem = index => {
    messages.splice(index,1);
    setMessages([...messages]);
  }

  return (
    <div>
      {
        messages.map((item, index)=>(
          <p key={index} onClick={(e)=>deleteItem(index)}>{item.message}</p>
        ))
      }
    </div>
  )
}

This works not properly so I solved by using this.

const handleCallback = msg => {
  const temp = Object.assign(messages,[]);
  temp.push(msg);
  setMessages(temp)
}

In general, many developers are adding a new item by the DOM event. In my app, it is automatically added by the API without rendering the UI. That was the problem. https://thecodebarbarian.com/object-assign-vs-object-spread.html

Spread operator also copies the array but have different value though original value changes. When you use Object.assign, copied value has the same value when original value changes.

In my app, when I use spread operator, message variable remains the original empty value though it seems to change.