第一种:使用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. oracle基础知识语法大全

    ORACLE支持五种类型的完整性约束NOT NULL (非空)--防止NULL值进入指定的列,在单列基础上定义,默认情况下,ORACLE允许在任何列中有NULL值.CHECK (检查)--检查在约束中 ...

  2. Ole操作帮助类

    /// <summary> /// Ole操作类 /// </summary> public class OleDataBaseHandle { private static ...

  3. python class 中__next__用法

    class A(): def __init__(self,b): self.b=b # def __iter__(self): # 这个函数可以用,表示迭代标志,但也可以省略 # return sel ...

  4. json_rpc_2 implementation

    https://stackoverflow.com/questions/52670255/flutter-json-rpc-2-implementation import 'dart:convert' ...

  5. vue中is与:is的区别

    简略回答 假设父组件中有一个show数据,show="one":is="show"-->实际上是is="one" is="s ...

  6. Python人工智能第二篇:人脸检测和图像识别

    Python人工智能第二篇:人脸检测和图像识别 人脸检测 详细内容请看技术文档:https://ai.baidu.com/docs#/Face-Python-SDK/top from aip impo ...

  7. java系统化基础-day01-基础语法知识

    1.学前必看 该课程将系统化的讲解java基础,但是该课程并不适合零基础的学员,因为在整个java学习体系中我们是按照实际生产设计, 主体思路是以完成某个业务为主线,用到什么技术就学什么技术,即带着问 ...

  8. Linux下设置postgresql数据库开机启动

    PostgreSQL的开机自启动脚本位于PostgreSQL源码目录的contrib/start-scripts路径下,linux文件即为linux系统上的启动脚本: 1.将Linux文件复制到 /e ...

  9. GCC编译流程浅析

    GCC-GCC编译流程浅析 序言 对于大多数程序员而言,大家都知道gcc是什么,但是如果不接触到linux平台下的开发,鲜有人真正了解gcc的编译流程,因为windows+IDE的开发模式简直是一条龙 ...

  10. 网页自动跳转 HTTP-EQUIV="REFRESH"

    文章:META HTTP-EQUIV="REFRESH" 实现网页自动跳转 < META HTTP-EQUIV="REFRESH" CONTENT=&qu ...