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