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