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 封装及解耦
推荐阅读
DOM树问题
在项目遇到客户端DOM和服务端内容不一致的问题,在本地运行时,不会由任何影响,当项目部署上线之后,产生的问题就很严重了,对导致项目页面打不开。问题重现:HTML代码:
A_Ghost阅读 668
如何优雅地封装 axios
如何优雅地封装 axios工作中接手他人的项目,看到一些 axios 封装很是复杂,难用,现在来总结一下 axios 封装 xhr 的问题。在 vue 项目中使用,希望达到下面的效果:引用方便,在组件中,通过 this.$http[method]...
JackZhouMine赞 3阅读 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
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。