在nuxtjs中组织api调用


对与api的组织调用,nuxtjs的官方文档都是axios.get('https://jsonplaceholder.typicode.com/users')这样的格式。简单的用一用,也问题不大,但是项目一大之后,对请求url的管理,前置,后置拦截器的处理,就比较麻烦了。

拦截器

拦截器的设置相对简单,官方文档也有介绍。

这里传入的参数是context,$axios, store都是挂载在它上面的属性。

不要使用 import axios from 'axios'的形式,在nuxt中,axios可以在服务端,和客户端两种环境执行,框架已经对这两种情况做了封装,直接在插件目录引用axios就可以

// plugins/axios.js

export default function({ $axios, store }) {
  $axios.onRequest((config) => {
    console.log('request')
    store.commit('showloading', true)
    return config
  })

  $axios.onResponse((response) => {
    store.commit('showloading', false)
    if (response.status === 200) {
      return response
    }
  })

  $axios.onError((error) => {
    store.commit('showloading', false)
    return Promise.reject(error)
  })
}

api 的组织和分离

但是怎么样分离api?

1. 依赖注入的方式注入axios

通过函数参数的形式,把axios注入到上下文中,直接调用。

// api/index.js
// 高阶函数
export default (axios) => () => ({
  index(params) {
    return axios.post('/word', params)
  }
})

2.使用nuxtjs插件注入axios

  • 我们如何在整个Nuxt应用程序中访问api
  • 我们如何从Nuxt模块正确传入 axios实例?
// plugins/axios-api-plugin.js
import createApi from '~/api/index'
// 这里ctx也可以访问到store
export default (ctx, inject) => {
  // 注入上下文
  // 挂载到vue实例上面 (组件中使用:this.$api)
  const apiAxios = createApi(ctx.$axios)
  inject('api', apiAxios())
}

再把上面的代码作为插件配置到plugins中就可以像这样调用api:

// 客户端 
await this.$api.index(params)
// 服务端 asyncData /fetch
await ctx.app.api.index(params)

这样封装之后,模块清晰,可维护性大大增加。

可运行示例:

https://github.com/justOneWord/one_word_web

参考资料:

https://blog.lichter.io/posts/nuxt-api-call-organization-and-decoupling/

https://codesandbox.io/s/github/manniL/nuxt-decouple-and-organize-api-calls

https://zh.nuxtjs.org/api/context


文章作者: Yao
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Yao !
 上一篇
code-surfer 中文翻译 code-surfer 中文翻译
code-surfer 炫酷的代码演示ppt。 用起来还是有些小毛病,比如无法居中,要手动条件,但是瑕不掩瑜,这是一款非常棒的软件。 顺手做了个翻译,已提到官方库。 和博客的渲染有点冲突,移步官方库,地址:https://github.c
2020-05-12
下一篇 
基础Linux学习 基础Linux学习
现在的服务都是部署在宝塔的基础上,基本是0技术要求,学习Linux,准备在下半年的服务换成原生的linux,不再依赖第三方控制面板。以下学习都是以Centos 7为基础。 常用命令 init 0: 关机 init 6: 重启 ip ad
2020-03-29
  目录