第一种:使用nuxt 提供的 Axios插件 @nuxtjs/axios

1、安装:npm install @nuxtjs/axios -d

2、配置 nuxt.config.js

exports default {
modules: [
'@nuxtjs/axios',
]
}

3、在提供的context(上下文对象)中取得$axios

async asyncData({ $axios }) {
const ip = await $axios.$get('...')
return { ip }
}

4、使用Nuxt plugin扩展Axios

  nuxt会在vue.js程序启动前调用 plugins目录下的脚本,并且以context(上下文对象)作为参数,可以取到$axios

  创建 plugins/axios.js 并定义axios的拦截器,定义请求的各个阶段需要进行的处理

export default function({ $axios, redirect }) {
// request interceptor
$axios.interceptors.request.use(
config => {
// do something before request is sent
return config
},
error => {
// do something with request error
return Promise.reject(error)
}
)
$axios.onRequest(config => {
console.log('Making request to ' + config.url)
}) // response interceptor
$axios.interceptors.response.use(
/**
* Determine the request status by custom code
* Here is just an example
* You can also judge the status by HTTP Status Code
*/
response => {
const res = response.data
if (res.code === ) {
return res
} else {
redirect('/404')
// if the custom code is not 200, it is judged as an error.
}
return Promise.reject(new Error(res.msg || 'Error'))
},
error => {
console.log('err' + error) // for debug return Promise.reject(error)
}
) $axios.onError(error => {
const code = parseInt(error.response && error.response.status)
if (code === ) {
redirect('/404')
} else if (code === ) {
redirect('/500')
}
})
}

5、添加插件到nuxt.config.js配置文件

plugins: [
'@/plugins/axios'
],

第二种:直接引入axios,并模块化请求,就像vue中那样使用

1、安装:npm install axios --save

2、创建Axios扩展request.js

  在/api/request.js主要做了3件事:

  • 创建axios实例
  • 增加request拦截器,在请求发出前做自定义处理,比如加上token,sessionID
  • 增加response拦截器,收到响应信息后判断响应状态,如果出错可以使用Message组件提示

  PS:在AsyncData方法中调用时,在服务器端执行,没有UI,所以无法进行UI展示提示。所以需要通过process.server变量判断当前环境是不是服务器。

/**
* 封装Axios
* 处理请求、响应错误信息
*/
import { Message } from 'element-ui' //引用饿了么UI消息组件
import axios from 'axios' //引用axios // create an axios instance
const service = axios.create({
baseURL: '/api/', // 所有异步请求都加上/api,nginx转发到后端Springboot
withCredentials: true, // send cookies when cross-domain requests
timeout: // request timeout
}) // request interceptor
service.interceptors.request.use(
config => {
// do something before request is sent
// config.headers['-Token'] = getToken()
return config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
) // response interceptor
service.interceptors.response.use(
/**
* If you want to get http information such as headers or status
* Please return response => response
*/ /**
* Determine the request status by custom code
* Here is just an example
* You can also judge the status by HTTP Status Code
*/
response => {
const res = response.data //res is my own data if (res.code === ) {
// do somethings when response success
// Message({
// message: res.message || '操作成功',
// type: 'success',
// duration: 1 * 1000
// })
return res
} else {
// if the custom code is not 200000, it is judged as an error.
Message({
message: res.msg || 'Error',
type: 'error',
duration: *
})
return Promise.reject(new Error(res.msg || 'Error'))
}
},
error => {
console.log('err' + error) // for debug
Message({
message: error.message,
type: 'error',
duration: *
})
return Promise.reject(error)
}
) export default service //导出封装后的axios

3、创建API接口文件

  创建API接口文件,抽出所有模块的异步请求,将同模块的请求写在一起,将ajax请求和页面隔离,如果后端API调整,只需要修改对应接口文件

import request from './request'

/**
* 获取博客详情
* @param id 博客ID
*/
export function getBlog(id) {
return request({
url: 'blog/detail/' + id,
method: 'get'
})
}
/**
* 获取博客列表
* @param page 页码
* @param max 每页显示数量
*/
export function getList(page, max) {
return request({
url: 'blog/list',
method: 'get',
params: { page, max }
})
}

4、vue组件使用

import { getBlog} from '~/api/blog'

 asyncData({ params, redirect}) {
return getBlog(params.id) //直接使用API导出的方法进行请求
.then(({ data }) => {
return { blog: data }
}).catch((e) => { //从nuxt context 中获取 redirect 进行跳转
redirect('/404')
})
}

NuxtJS如何利用axios异步请求的更多相关文章

  1. vue 中使用 async/await 将 axios 异步请求同步化处理

    1. axios 常规用法: export default { name: 'Historys', data() { return { totalData: 0, tableData: [] } }, ...

  2. js循环调用axios异步请求,实现同步

    准备: const axios = require('axios'); // axios请求 const res = []; const arr = ["a", "b&q ...

  3. vue axios异步请求django

    1,配置请求路径 (1),vue中的请求路径要与django视图路径相同. (2),vue中的路由路径也要和django视图路径相同,比如视图路径为127.0.0.1:8000:home/index, ...

  4. 4.npm模块安装和使用(axios异步请求,lodash工具库)

    建立package.json npm init 下载包 npm install axios npm install lodash 下载包,并加到package里面 npm install axios ...

  5. swiper用axios异步请求后 循环失效

    解决方案 使用ajax动态获取数据  当数据还没有收到的时候,swiper组件收到的是跟组件data传过来的空数组,会造成渲染问题 这个时候可以给swiper组件 设置一个  v-if='list.l ...

  6. vue--axios异步请求及文件目录结构分析(个人记录)

    我这里使用axios进行异步加载 axios是一个库,并不是vue中的第三方插件,使用时不能通过Vue.use()安装插件,需要在原型上进行绑定,即直接在main.js中使用Vue.prototype ...

  7. maven工程 java 实现文件上传 SSM ajax异步请求上传

    java ssm框架实现文件上传 实现:单文件上传.多文件上传(单选和多选),并且用 ajax 异步刷新,在当前界面显示上传的文件 首先springmvc的配置文件要配置上传文件解析器: <!- ...

  8. 解决ajax异步请求数据后swiper不能循环轮播(loop失效)问题、滑动后不能轮播的问题。

    问题描述: 1.我使用axios异步请求后台的图片进行渲染后不能实现循环轮播,也就是loop失效,但是静态写死的情况下不会出现这种问题. 2. 分析: swiper的机制是:初始化的时候将swiper ...

  9. Vue axios异步获取后台数据alert提示undefined

    记录一个小问题,关于分页查询套餐 前台通过axios异步请求获取后台数据alert弹出数据提示undefined 下面有三个bean PageResult /** * 分页结果封装对象 */ publ ...

随机推荐

  1. AESUtil

    AESUtil package cn.ucaner.alpaca.common.util; import sun.misc.BASE64Decoder; import sun.misc.BASE64E ...

  2. CentOS7.6离线安装docker

    2019/10/24,docker 摘要:CentOS 7.6中离线安装docker 18.06.3以及docker-compose 1.24.1 在线安装可参照 文档 所需环境 1.CentOS 7 ...

  3. MSP---助力企业轻松上云

    一.企业上云的总体步骤 1.传统企业级应用上云方法论概述 2.应用现代化概念 3.应用上云都需要什么 1.评估该应用是否可以上云, 2.上云需要付出多少时间和人力 3.企业级应用案例 4.生成评估报告 ...

  4. 回归写博客时间-----CeliaTodd

    2019-10-17-19:28:01 记录自己的学习路程 国庆期间本来是有持续写博客的,但是有各种原因就没时间写博客了, 但是学习的进度还是没有落下的,现在正式回归写博客的时间了. 但现在不是写Py ...

  5. ROS的安装与使用

    一.apt方式安装 安装 说起ROS,可能大家现在或多或少都有所了解.现如今世界机器人发展之迅猛犹如几十年前计算机行业一样,机器人也逐渐进入到千家万户,大到工业机器人,小到家用的服务型机器人,各式各样 ...

  6. django 自定义身份认证

    自定义身份认证: Django 自带的认证系统足够应付大多数情况,但你或许不打算使用现成的认证系统.定制自己的项目的权限系统需要了解哪些一些关键点,即Django中哪些部分是能够扩展或替换的.这个文档 ...

  7. watch from Middle English wacche

    watch As a noun, from Middle English wacche, Etymology As a noun, from Middle English wacche,See bel ...

  8. java中的参数传递

    Java中只有传值调用(值传递),没有传址调用(址传递或者引用传递).所以在java方法中改变参数的值是不会改变原变量的值的,但为什么改变引用变量的属性值却可以呢?请看下面的解答. java中的数据类 ...

  9. 使用PATH变量进行Linux权限升级技巧

    0x00 前言 在解决了几个OSCP挑战之后,我们决定写一篇关于用于Linux权限升级的各种方法的文章,这对我们的读者在其渗透测试项目中有所帮助.在本文中,我们将学习“使用$path变量的各种方法”以 ...

  10. PM2 对 Node 项目进行线上部署与配置

    pm2 是一个带有负载均衡功能的 Node 应用的进程管理器. 1. pm2 主要特点 内建负载均衡(使用Node cluster 集群模块) 保持后台运行 进程守护,系统崩溃后自动重启 启动多进程, ...