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 封装及解耦