正文 

当前位置： 首页 > java > java语法

nuxt.js封装axios

百科全输      2022-02-09     749

关键词：

1、安装axios

　　

cnpm install axios --save

 

2、在plugins文件夹下面创建service.js

import axios from ‘axios‘

import { Message, Notification } from ‘element-ui‘

axios.defaults.headers[‘X-Requested-With‘] = ‘XMLHttpRequest‘
axios.defaults.headers.post[‘Content-Type‘] = ‘text/plain;charset=UTF-8‘
let service = axios.create({
  // baseURL: ‘/‘,
  timeout: 10000
})

 // 请求拦截 可在请求头中加入token等
service.interceptors.request.use(config => {

  return config
}, error => {
  return Promise.reject(error)
})

// 响应拦截 对响应消息作初步的处理
service.interceptors.response.use(resp => {
  if (resp.data) {
    if (resp.data.code !== ‘0‘) {
      Message({
        type: ‘error‘,
        message: resp.data.message,
        duration: 5000
      })
    }
    return { code: resp.data.code, data: resp.data.data, msg: resp.data.message }
  } else {
    return resp
  }
}, error => {
  if (error.response) {
    switch (error.response.states) {
      case 400: {
        if (error.response && error.response.data && error.response.data.message) {
          Notification.error({
            title: ‘400错误‘,
            message: error.response.data.message,
            duration: 5000,
            closable: true
          })
        }
        break
      }
    }
  }
})

export default service

 

3、创建统一接口文件

　　在一级目录创建api文件夹，在api文件夹下面创建user.js(可根据后台接口自定义命名)

　　user.js代码：

import request from ‘@/plugins/axios‘

// 获取验证码
export const getVerifyCode = () => {
  return request({
    url: ‘/user/getVerifyCode‘,
    method: ‘get‘
  })
}

// 登录
export function login (data) {
  return request({
    url: ‘/user/login‘,
    method: ‘post‘,
    data: data
  })
}

export function getUser (params) {
  return request({
    url: ‘/user/getUser‘,
    method: ‘get‘,
    params: params
  })
}

 

 

4、组件内调用接口

import { getVerifyCode } from ‘@/api/user‘
getVerifyCode().then(res => {
   console.log(res) 
}).catch(err => {
   console.log(err) 
})

 

Tabulator + Nuxt.js：如何在回调中使用 axios？

】Tabulator+Nuxt.js：如何在回调中使用axios？【英文标题】：Tabulator+Nuxt.js:Howtouseaxiosincallbacks?【发布时间】：2020-01-1608:48:53【问题描述】：我尝试在我的Nuxt.js项目中添加Tabulator。我已经完成了下一个组件：<template><divref="table... 查看详情

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 的 axios 插件中访问当前的 fullPath？

】如何在Nuxt.js的axios插件中访问当前的fullPath？【英文标题】：HowcanIaccessthecurrentfullPathinsideofaaxiosplugininNuxt.js?【发布时间】：2020-02-0807:01:42【问题描述】：我正在尝试从Axios的Nuxt插件中获取通过route.fullPath的当前路径。它在一定... 查看详情

无法提交 Axios Post 表单 Nuxt.js (VueJS)

】无法提交AxiosPost表单Nuxt.js(VueJS)【英文标题】：Can\'tSubmitAxiosPostformNuxt.js(VueJS)【发布时间】：2019-06-2113:45:52【问题描述】：我正在玩我在Vue中的第一个表单。我已经用Nuxt创建了我的应用程序。我可以通过我的API的axiosget请求获... 查看详情

NUXT.js 和 Axios 运行时如何避免代码重复？

】NUXT.js和Axios运行时如何避免代码重复？【英文标题】：HowtoavoidcodeduplicationwhenrunningNUXT.jsandAxios?【发布时间】：2020-11-2205:28:43【问题描述】：如果相似的代码（如示例中）在不同的组件中重复，但我在函数参数中传递的名称略... 查看详情

nuxt.js - 如何在服务器端为所有客户端缓存 axios 调用

】nuxt.js-如何在服务器端为所有客户端缓存axios调用【英文标题】：nuxt.js-Howtocacheaxioscallatserversideforallclients【发布时间】：2020-05-1915:45:59【问题描述】：我正在使用vue+nuxt.js应用程序，我想知道是否可以为所有客户端缓存axioswebser... 查看详情

在 Nuxt JS 中为 Axios 配置本地 php 端点

】在NuxtJS中为Axios配置本地php端点【英文标题】：ConfigurelocalphpendpointforAxiosinNuxtJS【发布时间】：2019-12-1312:23:05【问题描述】：我想使用Axios进行指向本地PHP文件的客户端AJAX调用。为什么选择PHP？我在一个简单的基于PHP的API中有... 查看详情

如何在nuxt中获取axios baseUrl？

】如何在nuxt中获取axiosbaseUrl？【英文标题】：HowtogetaxiosbaseUrlinnuxt?【发布时间】：2019-01-2418:54:30【问题描述】：我的Nuxt.js项目中有axios模块。当我的客户端在端口3000上运行时，我还在localhost:4040/api中设置了我的baseUrl（用于API）... 查看详情

使用带有 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的学习路由组件的学习(代码片段)

...载数据asyncData 2、axios请求数据3、axios拦截器4、Vue-Router nuxt-link5、动态路由（一）vue的动态路由（二）文件夹动态路由 6、嵌套路由 7、中间件8、Nuxt生命周期流程图分析1、异步加载数据asyncDataasyncData方法会在组... 查看详情

nuxt.js入门安装及灵活使用(代码片段)

Nuxt.js1、案例入门1.1、create-nuxt-app介绍1.2、安装1.3启动1.4、访问2、目录结构2.1、目录1.2、别名3、路由3.1、路由概述3.2、基础路由3.3、动态路由3.4、动态命名路由3.5、默认路由3.6、嵌套路由3.7、过渡动效3.7.1全局过渡动效设置3.7.2... 查看详情

Nuxt.js 嵌套路由加载问题

】Nuxt.js嵌套路由加载问题【英文标题】：Nuxt.jsnestedrouteloadingissue【发布时间】：2021-01-0203:11:36【问题描述】：以上所有代码均来自我在pages/apibuilder/models文件夹中的文件_id.vue我用它来用数据填充我的商店asyncasyncData(store)//this.data... 查看详情

使用 nuxt-mail 在 Nuxt.js 中发送邮件

】使用nuxt-mail在Nuxt.js中发送邮件【英文标题】：SendingmailinNuxt.jswithnuxt-mail【发布时间】：2021-07-1011:05:47【问题描述】：我是Nuxt.js/Vue.js的新手，所以这里有一些新手问题：D我在从Nuxt.js应用程序中的联系人发送邮件时遇到问题。... 查看详情

如何在 nuxt.js 上手动触发路由？

】如何在nuxt.js上手动触发路由？【英文标题】：Howtomanuallytriggerroutingonnuxt.js?【发布时间】：2021-07-2623:41:01【问题描述】：我想在回调中登录后手动导航到主页。methods:asyncuserLogin()varsession_url="/api/v1/authenticate";axios.post(session_url,thi... 查看详情

Vuex Mutation 不适用于 Nuxt.js

】VuexMutation不适用于Nuxt.js【英文标题】：VuexMutationdoesnotworkwithNuxt.js【发布时间】：2018-08-1315:37:49【问题描述】：vuex和nuxt的新手，因此可能有一个非常简单的解决方法。我有两个中间件，一个使用AXIOS对github进行api调用，另一个... 查看详情

使用 Nuxt.js 进行开发和生产的不同 baseURL

】使用Nuxt.js进行开发和生产的不同baseURL【英文标题】：DifferentbaseURLfordevelopmentandproductionwithNuxt.js【发布时间】：2019-06-2805:10:14【问题描述】：如何为开发和生产添加不同的baseURL？这是目前我的nuxt.config.jsmodule.exports=mode:\'universal... 查看详情

Nuxt.js 的 data() 中未定义变量

】Nuxt.js的data()中未定义变量【英文标题】：Variablebeingundefinedindata()inNuxt.js【发布时间】：2021-01-1305:45:12【问题描述】：由于某种原因，今天早上这给我带来了麻烦，我就是想不通为什么它不起作用。我有一个变量“应用程序”... 查看详情

nuxt.js做站点地图(sitemap.xml)详解(代码片段)

...(sitemap.xml，robots.txt)又是必不可少的,这里就记录一下nuxt中站点地图是如何做的。第一步:在根目录static目录下新建sitemap.jssitemap.xml文件的内容importaxiosfrom"axios";constsitemap=path:' 查看详情