fetch获取wasm模块实例

大 | 中 | 小
[不指定 2024/11/14 11:18 | by 刘新修 ]

fetch获取wasm模块实例

JavaScript代码
  1. /*** 完整的实例 ***/  
  2. fetch("/pkg/wasm-lib/wasm_lib_bg.wasm")  
  3.     .then((response) => response.arrayBuffer())  
  4.     .then(bytes => {  
  5.         var module = new WebAssembly.Module(bytes);  
  6.         var imports = {  
  7.             "__wbindgen_init_externref_table": ()=> {}  
  8.         };  
  9.         var instance = new WebAssembly  
  10.             .Instance(module, { wbg: imports});  
  11.         console.log(instance.exports.add(1,2));  
  12.     })  

axios获取wasm模块实例

JavaScript代码
  1. /*** 请求.wasm文件流 ***/  
  2. this.$store.dispatch("test/getWasmStream",{}).then(async (res) => {  
  3.     WebAssembly.compile(res.data).then(module => {  
  4.         // 使用编译好的模块  
  5.   
  6.         // 打印静态属性  
  7.         var imports = WebAssembly.Module.imports(module);  
  8.         var exports = WebAssembly.Module.exports(module);  
  9.         var strJSON = JSON.stringify({"imports":imports, "exports":exports}, null, 2)  
  10.         console.log('strJSON', strJSON)  
  11.   
  12.         var imports = {  
  13.             "__wbindgen_init_externref_table": ()=> {}  
  14.         };  
  15.   
  16.         /*** 使用WASM模块(运行实例) ***/  
  17.         var instance = new WebAssembly.Instance(module, {wbg: imports})  
  18.         //console.log(instance.exports.add(3,6))  
  19.   
  20.         this.exports = instance.exports;  
  21.   
  22.     }).catch(error => {  
  23.         console.error(error);  
  24.     });  
  25. }).catch((error)=> {  
  26.     console.log('Action failed', error);  
  27. });  

loadWebAssemblyModule.js 封装

JavaScript代码
  1. /* 
  2.  * @Description: loadWebAssemblyModule.js 
  3.  * @Version: 1.0 
  4.  * @Author: Jesse Liu 
  5.  * @Date: 2022-11-14 10:32:06 
  6.  * @LastEditors: Jesse Liu 
  7.  * @LastEditTime: 2024-11-14 10:55:25 
  8.  */  
  9.   
  10. /*** AJAX加载WASM模块的函数 ***/  
  11. const getWebAssemblyModule = (url) =>  {  
  12.     /*** 返回一个Promise ***/  
  13.     return new Promise(function(resolve, reject) {  
  14.         var xhr = new XMLHttpRequest();  
  15.         xhr.open('GET', url, true);  
  16.         xhr.responseType = 'arraybuffer';  
  17.         xhr.onload = function() {  
  18.             if (xhr.status === 200) {  
  19.                 // 加载成功，编译WASM模块  
  20.                 var arrayBuffer = xhr.response;  
  21.                 WebAssembly.compile(arrayBuffer).then(function(module) {  
  22.                     resolve(module);  
  23.                 }).catch(function(error) {  
  24.                     reject(error);  
  25.                 });  
  26.             } else {  
  27.                 // 出错了  
  28.                 reject(new Error('Error loading WASM module: ' + xhr.statusText));  
  29.             }  
  30.         };  
  31.         xhr.send();  
  32.     });  
  33. }  
  34.   
  35. /*** fetch加载WASM模块的函数 ***/  
  36. const fetchWebAssemblyModule = (url) =>  {  
  37.     /*** 返回一个Promise ***/  
  38.     return new Promise(function(resolve, reject) {  
  39.         fetch(url)  
  40.         .then((response) => response.arrayBuffer())  
  41.         .then(bytes => {  
  42.             var module = new WebAssembly.Module(bytes);  
  43.             resolve(module);  
  44.         })  
  45.         .catch(error => {  
  46.             console.error('Fetch 错误:', error)  
  47.             reject(error);  
  48.         });  
  49.     });  
  50. }  
  51.   
  52. export { fetchWebAssemblyModule, getWebAssemblyModule };  

 

 

H5/JS/CSS | 评论(0) | 引用(0) | 阅读(106)