You are trying to create a new angular, react, vue app, and you end up with an error message saying: npm ERR! Unexpected end of JSON input while parsing near There’s a high chance that your npm cache been damaged. Try:
|
1 |
npm cache clean --force |
If you are a windows user, try deleting all files in this folder:
|
1 |
C:\Users{{your-username}}\AppData\Roaming\npm-cache |
Then…
|
1 |
npm cache verify |
If that doesn’t work, try updating to the lastest (understand the risks)
|
1 |
npm i npm@latest -g |
I hope this helps! from:https://dev.to/rishiabee/npm-err-unexpected-end-of-json-input-while-parsing-near-743
View Details前言 【类】和【接口】是 JavaScript 未来的方向，我们的 API 调用也将如此，朝着这个方向和业务模块同步分类、同步升级。本文讲的正是 —— Vue 魔法师，如何将 API “类化”？ 万物皆模块，万物可归类。闲言少叙，直接正题。 分类 API 环境： Vue2+ 或 Vue3+ 咱这里直接 VueCLI 迅速快捷构建
|
1 |
vue create vue-api-module |
得到如下目录
|
1 2 3 4 5 |
--src ----store ------index.js ----App.vue ----main.js |
然后新建文件 api.js 如下，
|
1 2 3 4 5 6 7 |
--src ----services ------api.js ----store ------index.js ----App.vue ----main.js |
基础类 API 我们先创建一个基础类如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
class BaseApiService { baseUrl = "https://jsonplaceholder.typicode.com"; resource; constructor(resource) { if (!resource) throw new Error("Resource is not provided"); this.resource = resource; } getUrl(id = "") { return `${this.baseUrl}/${this.resource}/${id}`; } handleErrors(err) { // 处理错误： console.log({ message: "Errors is handled here", err }); } } |
baseUrl：设置请求根路径； resource：来源； getUrl：获取链接函数，包含 baseUrl、resource、id； handleErrors：处理错误函数； 只读类 API 然后，我们再创建一个子类：包含 fetch、get 只读方法。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
class ReadOnlyApiService extends BaseApiService { constructor(resource) { super(resource); } async fetch(config = {}) { try { const response = await fetch(this.getUrl(), config); return await response.json(); } catch (err) { this.handleErrors(err); } } async get(id) { try { if (!id) throw Error("Id 不合法"); const response = await fetch(this.getUrl(id)); return await response.json(); } catch (err) { this.handleErrors(err); } } } |
fetch：获取数据； get：通过 id 获取数据； 写入类 API 接着，我们再创建一个包含可读写方法的子类：post、put、delete
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
class ModelApiService extends ReadOnlyApiService { constructor(resource) { super(resource); } async post(data = {}) { try { const response = await fetch(this.getUrl(), { method: "POST", body: JSON.stringify(data) }); const { id } = response.json(); return id; } catch (err) { this.handleErrors(err); } } async put(id, data = {}) { if (!id) throw Error("Id 不合法"); try { const response = await fetch(this.getUrl(id), { method: "PUT", body: JSON.stringify(data) }); const { id: responseId } = response.json(); return responseId; } catch (err) { this.handleErrors(err); } } async delete(id) { if (!id) throw Error("Id 不合法"); try { await fetch(this.getUrl(id), { method: "DELETE" }); return true; } catch (err) { this.handleErrors(err); } } } |
post：创建数据； put：更新数据； delete：删除数据； 继承 让我们看看两个简单的继承示例：
|
1 2 3 4 5 |
class UsersApiService extends ReadOnlyApiService { constructor() { super("users"); } } |
|
1 2 3 4 5 |
class PostsApiService extends ModelApiService { constructor() { super("posts"); } } |
【UsersApiService 类】继承了只读类 API —— ReadOnlyApiService，可以使用 fetch、get 两种方法。而 【PostsApiService 类】继承了读写类 API —— ModelApiService，可以使用 fetch、get、post、put、delete 五种方法。 我们也可以根据业务来写继承 API 类:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
class AlbumsApiService extends ModelApiService { constructor() { super("albums"); } async uploadImage() { /* 这里可以写你的上传图片逻辑 */ console.log({ message: "图片上传成功！" }); return true; } async triggerError() { try { throw Error(" API 模块调用错误！"); } catch (err) { this.handleErrors(err); } } } |
导出 我们在 api.js 导出这些 […]
View Details