gpt4 book ai didi

xmlhttprequest - 如何让 Axios 使用 Fetch 而不是 XMLHttpRequest

转载 作者:行者123 更新时间:2023-12-04 12:44:06 26 4
gpt4 key购买 nike

我是 PWA 的初学者,我尝试让我的代码调用 API,然后将其存储在浏览器的缓存中。但是我看到 axios 使用 XMLHttpRequest 而不是 fetch API,所以我无法缓存我的 API 调用。

我将工作箱用于服务 worker 和 vue cli。
我的 service-worker.js :

   workbox.setConfig({
debug: false,
});

workbox.precaching.precacheAndRoute([]);

//image in cache
workbox.routing.registerRoute(
/\.(?:png|gif|jpg|jpeg|svg)$/,
workbox.strategies.staleWhileRevalidate({
cacheName: 'images',
plugins: [
new workbox.expiration.Plugin({
maxEntries: 60,
maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
}),
],
}),
);

//network request in cache
workbox.routing.registerRoute(
new RegExp('http://api.giphy.com/v1/gifs/'),
workbox.strategies.networkFirst({
cacheName: 'api',
}),
);

//js and css in cache
workbox.routing.registerRoute(
/\.(?:js|css)$/,
workbox.strategies.staleWhileRevalidate(),
);

//webfont in cache
workbox.routing.registerRoute(
new RegExp('https://fonts.(?:googleapis|gstatic).com/(.*)'),
workbox.strategies.cacheFirst({
cacheName: 'googleapis',
plugins: [
new workbox.expiration.Plugin({
maxEntries: 30,
}),
],
}),
);

我的 registerServiceWorker.js :
   import { register } from 'register-service-worker'

if (process.env.NODE_ENV === 'production') {
register(`${process.env.BASE_URL}service-worker.js`, {
ready () {
console.log(
'App is being served from cache by a service worker.\n'
)
},
registered () {
console.log('Service worker has been registered.')
},
cached () {
console.log('content in cached');
},
updatefound () {
console.log('New content is downloading.')
},
updated () {
console.log('New content is available; please refresh.')
},
offline () {

},
error (error) {
console.error('Error during service worker registration:', error)
}
})
}

和我的调用 API :
import Vue from 'vue';
import CONSTANTS from '../constants/constants';
import exception_manager from 'exception_manager';

export default {
getGiphy() {
return Vue.axios.get(`${CONSTANTS.SERVER_ADDRESS}search?q=cat&api_key=${CONSTANTS.API_KEY}&limit=9`).catch(error => {
exception_manager.handleException(error, 'GiphyService.js', 8, window, CONSTANTS.ERROR_SERVER_ADDRESS);
});

}
}

我认为这确实是 xmlhttprequest 的故事,但我不确定。
另一方面,js、css 和图像文件被很好地缓存

最佳答案

Service Worker 内部的 RegExp 路由查找 http://api.giphy.com/v1/gifs/ ,这是一个 http:网址。 Service Worker 只会拦截安全请求,这意味着 https: (或 http://localhost)。

确保您使用的是 https:在您的客户端 Vue 代码中,并调整您的 Workbox 配置以使用 https:以及。

关于xmlhttprequest - 如何让 Axios 使用 Fetch 而不是 XMLHttpRequest,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54250979/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com