NuxtJS如何利用axios异步请求
第一种:使用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异步请求的更多相关文章
- vue 中使用 async/await 将 axios 异步请求同步化处理
1. axios 常规用法: export default { name: 'Historys', data() { return { totalData: 0, tableData: [] } }, ...
- js循环调用axios异步请求,实现同步
准备: const axios = require('axios'); // axios请求 const res = []; const arr = ["a", "b&q ...
- vue axios异步请求django
1,配置请求路径 (1),vue中的请求路径要与django视图路径相同. (2),vue中的路由路径也要和django视图路径相同,比如视图路径为127.0.0.1:8000:home/index, ...
- 4.npm模块安装和使用(axios异步请求,lodash工具库)
建立package.json npm init 下载包 npm install axios npm install lodash 下载包,并加到package里面 npm install axios ...
- swiper用axios异步请求后 循环失效
解决方案 使用ajax动态获取数据 当数据还没有收到的时候,swiper组件收到的是跟组件data传过来的空数组,会造成渲染问题 这个时候可以给swiper组件 设置一个 v-if='list.l ...
- vue--axios异步请求及文件目录结构分析(个人记录)
我这里使用axios进行异步加载 axios是一个库,并不是vue中的第三方插件,使用时不能通过Vue.use()安装插件,需要在原型上进行绑定,即直接在main.js中使用Vue.prototype ...
- maven工程 java 实现文件上传 SSM ajax异步请求上传
java ssm框架实现文件上传 实现:单文件上传.多文件上传(单选和多选),并且用 ajax 异步刷新,在当前界面显示上传的文件 首先springmvc的配置文件要配置上传文件解析器: <!- ...
- 解决ajax异步请求数据后swiper不能循环轮播(loop失效)问题、滑动后不能轮播的问题。
问题描述: 1.我使用axios异步请求后台的图片进行渲染后不能实现循环轮播,也就是loop失效,但是静态写死的情况下不会出现这种问题. 2. 分析: swiper的机制是:初始化的时候将swiper ...
- Vue axios异步获取后台数据alert提示undefined
记录一个小问题,关于分页查询套餐 前台通过axios异步请求获取后台数据alert弹出数据提示undefined 下面有三个bean PageResult /** * 分页结果封装对象 */ publ ...
随机推荐
- oracle基础知识语法大全
ORACLE支持五种类型的完整性约束NOT NULL (非空)--防止NULL值进入指定的列,在单列基础上定义,默认情况下,ORACLE允许在任何列中有NULL值.CHECK (检查)--检查在约束中 ...
- Ole操作帮助类
/// <summary> /// Ole操作类 /// </summary> public class OleDataBaseHandle { private static ...
- python class 中__next__用法
class A(): def __init__(self,b): self.b=b # def __iter__(self): # 这个函数可以用,表示迭代标志,但也可以省略 # return sel ...
- json_rpc_2 implementation
https://stackoverflow.com/questions/52670255/flutter-json-rpc-2-implementation import 'dart:convert' ...
- vue中is与:is的区别
简略回答 假设父组件中有一个show数据,show="one":is="show"-->实际上是is="one" is="s ...
- Python人工智能第二篇:人脸检测和图像识别
Python人工智能第二篇:人脸检测和图像识别 人脸检测 详细内容请看技术文档:https://ai.baidu.com/docs#/Face-Python-SDK/top from aip impo ...
- java系统化基础-day01-基础语法知识
1.学前必看 该课程将系统化的讲解java基础,但是该课程并不适合零基础的学员,因为在整个java学习体系中我们是按照实际生产设计, 主体思路是以完成某个业务为主线,用到什么技术就学什么技术,即带着问 ...
- Linux下设置postgresql数据库开机启动
PostgreSQL的开机自启动脚本位于PostgreSQL源码目录的contrib/start-scripts路径下,linux文件即为linux系统上的启动脚本: 1.将Linux文件复制到 /e ...
- GCC编译流程浅析
GCC-GCC编译流程浅析 序言 对于大多数程序员而言,大家都知道gcc是什么,但是如果不接触到linux平台下的开发,鲜有人真正了解gcc的编译流程,因为windows+IDE的开发模式简直是一条龙 ...
- 网页自动跳转 HTTP-EQUIV="REFRESH"
文章:META HTTP-EQUIV="REFRESH" 实现网页自动跳转 < META HTTP-EQUIV="REFRESH" CONTENT=&qu ...