nuxt统一管理api模块

最新推荐文章于 2024-09-04 07:40:04 发布

金刚腿

最新推荐文章于 2024-09-04 07:40:04 发布

阅读量2.3k

点赞数 9

分类专栏： nuxt 文章标签： javascript

本文链接：https://blog.csdn.net/GoldenLegs/article/details/110930762

版权

nuxt 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

思路

创建一个用于暴露api的plugin, 并将axios传参入api模块中调用

步骤

创建axios拦截器,统一管理请求(这步可有可无)

//plugins/axios
export default function({ store, redirect, req, router, $axios }) {
   
  $axios.interceptors.request.use(config => {
    return config;
  });
  $axios.interceptors.response.use(
    response => {

      if (!response.data.success) {
        return Promise.reject(response.data.msg);
      } else {
        return Promise.resolve(response.data);
      }
    },
    error => {

      let errinfo = error.response.data 
     
      return Promise.reject(errinfo);  
    }
  );
}

|--api
    |---index.js       //api模块入口文件
    |---apilist
    	|---home.js    //各个api接口
    	|---article.js

api/index.js: 用于导入apilist中的所有接口,
此时api/index模块导出为一个object, 参数为apilist中每个文件名,value值为对应的函数

// api/index.js
const modulesFiles = require.context("./apilist", true, /\.js$/);
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, "$1");

  const value = modulesFiles(modulePath);

  modules[moduleName] = value.default || value;

  return modules;
}, {});

export default modules;

//home.js 传入的axios参数调用
export default axios => ({
  list(data) {
    return axios.post(`/api/home/list`, data);
  }
});

使用plugin中inject参数暴露api ,
api注入到服务端context, vue实例, vuex中
文档参考https://www.nuxtjs.cn/guide/plugins

//plugins/api-plugin.js

import apis from "@/api/index";
export default (ctx, inject) => {

  var apiObject = {};
  for (var i in apis) {
    apiObject[i] = apis[i](ctx.$axios);
  }
 
  //文档: https://www.nuxtjs.cn/guide/plugins
  //inject:注入到服务端context, vue实例, vuex中
  inject("api", apiObject);

};

配置nuxt.config.js

plugins: ["@/plugins/axios", "@/plugins/api-plugins"]

具体使用
asyncData中

asyncData(ctx){
	return ctx.app.$api.home.list({page: 99}).then(res=>{
		return {
			data: res.data
		}
	})
}

页面中

mounted(){
	this.$api.home.list({page: 99}).then(res=>{
		this.data=res.data
	})
}

store中

export const actions = {
	GET_LIST({commit}){
		 return this.$api.home.list({page: 99}).then(res=>{
			 commit("setlist", res.data);
		})
	}
}

坑点:

asyncData需返回Promise,Promise中返回当前页面所需的数据, 或者使用callback回调出所需的数据, 或者使用async await, 具体[参考文档https://www.nuxtjs.cn/guide/async-data]
nuxt安装时勾选"@nuxtjs/axios"插件