Đặt tiêu đề mặc định cho mọi yêu cầu tìm nạp()

Question

Có thể sử dụng fetch API để đặt tiêu đề mặc định cho mỗi yêu cầu không?
Điều tôi muốn làm là đặt tiêu đề Authorization bất cứ khi nào có mã thông báo web json trong localStorage. Giải pháp hiện tại của tôi là để thiết lập các tiêu đề với chức năng này:

export default function setHeaders(headers) { 
    if(localStorage.jwt) { 
     return { 
      ...headers, 
      'Authorization': `Bearer ${localStorage.jwt}` 
     } 
    } else { 
     return headers; 
    } 
} 

Thiết lập tiêu đề trong một yêu cầu lấy thì sẽ trông như thế này:

return fetch('/someurl', { 
     method: 'post', 
     body: JSON.stringify(data), 
     headers: setHeaders({ 
      'Content-Type': 'application/json' 
     }) 
    }) 

Nhưng đó có phải là một cách tốt hơn để làm điều này. Tôi hiện đang phát triển ứng dụng React/Redux/Express nếu có bất kỳ trợ giúp nào.

Answer 1

Bạn có thể sử dụng Axios thay vì lấy, với đánh chặn

const setAuthorization = (token) => { 

    api.interceptors.request.use((config) => { 
    config.headers.Authorization = 'Bearer ' + token; 
    return config; 
    }); 

} 

đâu Api là một Object Axios với một URL cơ sở

const api= axios.create({ 
    baseURL: 'http://exemple.com' 
}); 

Và khi bạn nhận được thẻ của bạn, u chỉ phải gọi hàm setAuthorization.

Nguồn: Axios README.md

Answer 2

người tạo lấy mixin cho thiết lập mặc định để lấy.

https://github.com/moll/js-fetch-defaults