nuxt拆分自定义接口

之前的文章有讲到 nuxt 封装API,并进行简单的调用。在实际的开发中,接口会越来越多,如果继续放到一个文件下,就会拥挤不堪,所以,可以根据功能模块,将接口拆分一下,在api 文件里分别引入不同功能模块的请求地址。具体操作如下:

1,创建API文件

1,在项目根目录下,创建一个API文件

|--src
|--api
    |--module1.js
    |--module2.js

2,编写 module1.js 文件

export default ($axios) => ({
  get() {
    return $axios.$get("/v1/XXX")
  },
  put(data) {
    return $axios.$put("/v1/XXX",data)
  },
  .
  .
  .

})

2,修改plugins/api.js 文件

// 数据接口
import module1Repository from "../api/module1"
import module2Repository from "../api/module2"
export default function ({ app, $axios, error }, inject) {
  const API = {}
  const api = $axios.create({
    baseURL: process.env.BASE_URL, // url = base url + request url
    timeout: 5000, // request timeout
  })
  // 设置response 拦截
  // api.interceptors.response.use(
  //   // 接口错误状态处理,也就是说无响应时的处理
  //   // response => {
  //   //   // 拦截响应,做统一处理
  //   //   if (response.status) {
  //   //     switch (response.status) {
  //   //       case 409: console.log('呜呜呜呜'); break;
  //   //     }
  //   //   }
  //   //   return response
  //   // },
  //   error => {
  //   console.log('哎呀,粗错啦', error.response)
  //   // 返回接口返回的错误信息
  //   return Promise.reject(error)
  //   }
  // )

  API.module1API = module1Repository(api)
  API.module2API = module2Repository(api)
  app.api = API
  inject("api", API)
}

3,使用

1,在 asyncData 中使用

  async asyncData(context) {
    const routerInfo = context.params
    let moduleData = {}
    moduleData = await context.app.api.module1API.get()
    return { routerInfo, moduleData }
  },

2,在方法里使用。因为在plugins/api.js 中注入了API, inject("api", API) 才可以使用$api

  getList(row) {
    this.$api.module1API.get().then((res) => {
      // ...
    })
    .catch(e =>{
      if(e.response.status === 409){
        // console.log('错误~~·',e.response)
      }
    })
  },

记得在 nuxt.config.js 中引入,plugins/api.js 哦


以上就是nuxt + axios完整的内容了。关于,路由拦截,可根据实际需要进行封装处理。

参考来源:【Nuxt】API 封装及解耦

知道的越多,不知道的也就越多。

26 声望
4 粉丝
0 条评论
推荐阅读
DOM树问题
在项目遇到客户端DOM和服务端内容不一致的问题,在本地运行时,不会由任何影响,当项目部署上线之后,产生的问题就很严重了,对导致项目页面打不开。问题重现:HTML代码:

A_Ghost阅读 668

如何优雅地封装 axios
如何优雅地封装 axios工作中接手他人的项目,看到一些 axios 封装很是复杂,难用,现在来总结一下 axios 封装 xhr 的问题。在 vue 项目中使用,希望达到下面的效果:引用方便,在组件中,通过 this.$http[method]...

JackZhouMine3阅读 686

封面图
vue页面消毁时,取消axios当面所有请求
取消axios请求,需要了解axios里的 cancelToken 属性 {代码...} 首页定义一个数组进行储存每个请求的cancelToken, 可以储存到Vue对象、vuex、window等,在跳转路由时取消请求即可;路由处理

Max迪丶先生1阅读 3.4k

axios 请求参数去空
{代码...}

深邃烟海阅读 691

Assertion failed: (thread_id_key != 0x7777)
使用npm run build时报了这个错误:Assertion failed: (thread_id_key != 0x7777), function find_thread_id_key, file ../src/coroutine.cc, line 134.error Command failed with signal "SIGABRT".

来了老弟阅读 490

Nuxt3 根据路由刷新接口数据
刚用nuxt3,踩坑有点多。获取路由: {代码...} 请求数据: {代码...} 监听数据变化: {代码...} 监听路由变化: {代码...} 设置页面seo信息: 标题,关键词,描述 {代码...}

jsoncode阅读 470

nuxt作为主应用接入qiankun的实践(附代码)
nuxtjs中的路由组件<nuxt/>是对vue-router中<router-view/>的封装:(最大的坑点) {代码...} 可以看到nuxt支持配置来给路由加载过渡效果,切默认mode为out-in,但是这个动画模式会导致子应用激活时无...

不死小强阅读 436

知道的越多,不知道的也就越多。

26 声望
4 粉丝
宣传栏