如何在Nuxt中编写API服务插件？自定义插件无法运行该如何排查？

问题原因 #

代码里存在两处语法错误，直接导致插件无法正常运行：

1. inject 方法调用不符合规范：Nuxt 提供的inject方法要求传入两个必填参数，第一个参数为字符串类型的注入属性名，第二个参数才是要注入的实例/值，你仅传入了实例，参数不匹配触发报错。
2. axios 方法拼写错误：你代码里写的$axios.Sdelete属于笔误，Nuxt Axios 封装的直接返回响应体的方法统一为$get、$post、$delete格式，不存在Sdelete方法。

修复后的完整代码 #

export default ({ $axios }: any, inject: any) => {
  class BlogService {
    getPost() {
      return $axios.$get('/posts')
    }
    
    delete(id: Number) {
      // 修正删除方法拼写错误
      return $axios.$delete('/post/' + id)
    }
  }
  // 修正inject传参，第一个参数为注入名，后续可通过this.$blogService调用服务
  inject('blogService', new BlogService())
}

调用示例 #

在页面或者组件中可以直接调用封装好的服务：

async function getPostList() {
  const postList = await this.$blogService.getPost()
  // 后续处理获取到的文章列表
}

内容的提问来源于stack exchange，提问作者morteza mortezaie