乐趣区

关于nuxt.js: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 残缺的内容了。对于,路由拦挡,可依据理论须要进行封装解决。

退出移动版