关键词：
【中文标题】NUXT.js 和 Axios 运行时如何避免代码重复？【英文标题】：How to avoid code duplication when running NUXT.js and Axios? 【发布时间】：2020-11-22 05:28:43 【问题描述】：如果相似的代码（如示例中）在不同的组件中重复，但我在函数参数中传递的名称略有不同
有哪些选项可以将代码单独放在某个地方，然后使用自定义参数将其引入我的组件中？ （每个组件单独）
我应该通过插件来做到这一点吗？ 如果是这样，那么我如何在组件上实现单独的必要参数+如何仅在这些组件上连接插件而不在其他地方连接？
【问题讨论】：
你不需要这样做，因为每个请求都是不同的，最重要的是，当请求成功或失败时你会做其他事情 【参考方案1】：对于axios调用，可以创建一个函数或者类，每次都导入
类似services/axios
import axios from 'axios';
const axiosInstance = axios.create(
baseURL: process.env.VUE_APP_BASE_URL,
headers:
'Access-Control-Allow-Origin': '*',
accept: 'Accept: application/json',
,
);
export default axiosInstance;然后在utils/requests
import axiosInstance from '@/services/axios';
const apiRequest = async (axiosConfig) =>
try
const response = await axiosInstance(axiosConfig);
return
success: true,
data: response.data.data || response.data;
catch (error)
if (error.response)
error = error.response
// The request was made and the server responded with a status code
// that falls out of the range of 2xx
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
else if (error.request)
error = error.request
// The request was made but no response was received
// `error.request` is an instance of XMLHttpRequest in the browser and an instance of
// http.ClientRequest in node.js
console.log(error.request);
else
error = error.message
// Something happened in setting up the request that triggered an Error
console.log('Error', error.message);
return
success: false,
error
;
export const getRequest = async (url) =>
await apiRequest(
method: 'GET',
url,
);
export const postRequest = async(url, requestBody) =>
await apiRequest(
method: 'POST',
url,
data: requestBody
);然后在组件中导入 getRequest 和 postRequest 方法
component.vue
import getRequest, postRequest from '@/utils/requests';
const response = await postRequest('/url', requestBody);
if (response.success)
// do stuff on success
else
// error message
【讨论】：
【参考方案2】：我们可以通过 mixins 来实现。在 mixins 文件夹中创建一个 js 文件并将这个函数放在那里，并将这个 mixin 文件添加到 vue 文件中以使用这个函数。
【讨论】：
【参考方案3】：我在我的 nuxt 应用程序中使用了 nuxt/axios.js。您可以将其用作插件。
在插件文件夹中，创建一个文件axios.js
import axios from 'axios'
export default axios.create(
baseURL: process.env.baseURL,
)
注意：我使用dotenv lib 将要为API 调用的服务器的基本URL 存储在环境变量中。这样，就为所有要进行的调用设置了基本 url。
然后在nuxt.config.js文件中导入：
module.exports =
....
modules: [
'@nuxtjs/axios'
],
axios:
...
,
提示：如果您必须在 axios 中全局存储一个值，例如“token”或“cookie”。然后就可以使用axiosdefaults方法
axios.defaults.headers.common = Authorization: `bearer $token` ;
【讨论】：
如何在 Nuxt.js 的 axios 插件中访问当前的 fullPath？
】如何在Nuxt.js的axios插件中访问当前的fullPath？【英文标题】：HowcanIaccessthecurrentfullPathinsideofaaxiosplugininNuxt.js?【发布时间】：2020-02-0807:01:42【问题描述】：我正在尝试从Axios的Nuxt插件中获取通过route.fullPath的当前路径。它在一定... 查看详情
Tabulator + Nuxt.js：如何在回调中使用 axios？
】Tabulator+Nuxt.js：如何在回调中使用axios？【英文标题】：Tabulator+Nuxt.js:Howtouseaxiosincallbacks?【发布时间】：2020-01-1608:48:53【问题描述】：我尝试在我的Nuxt.js项目中添加Tabulator。我已经完成了下一个组件：<template><divref="table... 查看详情
使用带有 Nuxt js 的 axios 从 Directions API 获取数据时的跨域读取阻塞 (CORB)
】使用带有Nuxtjs的axios从DirectionsAPI获取数据时的跨域读取阻塞(CORB)【英文标题】：Cross-OriginReadBlocking(CORB)whengetdatafromDirectionsAPIusingaxioswithNuxtjs【发布时间】：2019-02-0700:57:11【问题描述】：在我的Nuxt项目中，我使用vue2-google-maps库... 查看详情
nuxt.js - 如何在服务器端为所有客户端缓存 axios 调用
】nuxt.js-如何在服务器端为所有客户端缓存axios调用【英文标题】：nuxt.js-Howtocacheaxioscallatserversideforallclients【发布时间】：2020-05-1915:45:59【问题描述】：我正在使用vue+nuxt.js应用程序，我想知道是否可以为所有客户端缓存axioswebser... 查看详情
如何让 Nuxt.js 同时接受 `/` 和 `/index.html` URL？
...：我正在使用Nuxt.js默认模式、通用和历史路由器。当我运行nuxtgenerate并获得一个网站时，Nuxt.js在dist文件夹中生成index.html。因此，如果我发布网站，我可以 查看详情
nuxt.js封装axios
1、安装axios cnpminstallaxios--save 2、在plugins文件夹下面创建service.jsimportaxiosfrom‘axios‘import{Message,Notification}from‘element-ui‘axios.defaults.headers[‘X-Requested-With‘]=‘XMLHttpRequest‘axios.def 查看详情
如何在实际服务中运行 nuxt.js？
】如何在实际服务中运行nuxt.js？【英文标题】：Howtorunnuxt.jsinrealservice?【发布时间】：2017-10-2817:56:32【问题描述】：我在中使用了vue-clivueinitnuxt/expressmyProject和，npm运行开发开发。但是，npm运行构建之后，创建了dist文件。如何在... 查看详情
Nuxt.js 中“$axios”的类型是啥？
】Nuxt.js中“$axios”的类型是啥？【英文标题】：Whatisthetypefor"$axios"inNuxt.js?Nuxt.js中“$axios”的类型是什么？【发布时间】：2022-01-1923:19:35【问题描述】：夏天现在我为API连接实现了RepositoryFactory模式。https://medium.com/canarias... 查看详情
在 Nuxt.js 中发送每个请求时，如何将对象添加到 apollo 上的数据？
】在Nuxt.js中发送每个请求时，如何将对象添加到apollo上的数据？【英文标题】：HowcanIaddanobjecttodataonapollowhensendingeachrequestinNuxt.js?【发布时间】：2021-08-0702:54:09【问题描述】：我有一个在每个请求上发送的对象，也是静态的。所... 查看详情
vuetifyssr分页(代码片段)
...“渲染功能或模板未在组件中定义：匿名”任何人都知道如何建立正确的SSR分页或如何解决我的解决方案？答案不知道这个线程是否仍然有效，但这是我对nuxt的vuetify分页的解决方案。 <script> importPostListfrom"@/componen... 查看详情
nuxtjs/axios 4.4.0版本的初始化方法是啥？ (nuxt.js)
】nuxtjs/axios4.4.0版本的初始化方法是啥？(nuxt.js)【英文标题】：nuxtjs/axiosWhatisthewaytoinitializeversion4.4.0?(nuxt.js)nuxtjs/axios4.4.0版本的初始化方法是什么？(nuxt.js)【发布时间】：2018-04-1807:37:22【问题描述】：我想使用nuxtjs/axios模块。首... 查看详情
nuxt.js的学习路由组件的学习(代码片段)
目录1、异步加载数据asyncData 2、axios请求数据3、axios拦截器4、Vue-Router nuxt-link5、动态路由（一）vue的动态路由（二）文件夹动态路由 6、嵌套路由 7、中间件8、Nuxt生命周期流程图分析1、异步加载数据asyncDataasync... 查看详情
如何使用 Tailwind 和 Nuxt.js 突出显示导航栏上的活动部分？
】如何使用Tailwind和Nuxt.js突出显示导航栏上的活动部分？【英文标题】：HowtohighlightanactivesectiononthenavbarusingTailwindwithNuxt.js?【发布时间】：2021-02-2004:53:42【问题描述】：我有一个包含不同id部分和导航栏的单页网站。当用户在各... 查看详情
无法提交 Axios Post 表单 Nuxt.js (VueJS)
】无法提交AxiosPost表单Nuxt.js(VueJS)【英文标题】：Can\'tSubmitAxiosPostformNuxt.js(VueJS)【发布时间】：2019-06-2113:45:52【问题描述】：我正在玩我在Vue中的第一个表单。我已经用Nuxt创建了我的应用程序。我可以通过我的API的axiosget请求获... 查看详情
Vuex Mutation 不适用于 Nuxt.js
...有一个非常简单的解决方法。我有两个中间件，一个使用AXIOS对github进行api调用，另一个从medium.com用户的RSS提要中提取并转换为JSON。提交存储时github突变工作正常，中等突变不提交存储 查看详情
使用 nuxt-mail 在 Nuxt.js 中发送邮件
...尝试使用nuxt-mailer，但无法使其正常工作。我已经安装了axios和nuxt-mail。我得到500（内部服 查看详情
nuxt.js入门安装及灵活使用(代码片段)
...自定义布局4.4、错误页面4.5、Nuxt组件特殊配置4.5.1、模板代码4.5.2、head5、ajax操作5.1、整合axios5.1.1默认整合5.1.2手动整合5.1.3、常见配置5.2、使用axios发送ajax5.3、使用asyncData发送ajax5.3.1发送一次请求5.3.2、发送多次请求5.4、使用fet... 查看详情
如何在 nuxt.js 上手动触发路由？
】如何在nuxt.js上手动触发路由？【英文标题】：Howtomanuallytriggerroutingonnuxt.js?【发布时间】：2021-07-2623:41:01【问题描述】：我想在回调中登录后手动导航到主页。methods:asyncuserLogin()varsession_url="/api/v1/authenticate";axios.post(session_url,thi... 查看详情