![cd5548a8d5f6bf3823ac10226799c42f.png](https://i-blog.csdnimg.cn/blog_migrate/f1945282bcf8438df3a3183327cf994d.png)
NuxtJS 通过 2种方式引入axios进行异步数据请求
第一种 使用nuxt 提供的 Axios插件 @nuxtjs/axios
1.安装
npm install @nuxtjs/axios -d
2.配置 nuxt.config.js
exports default {
modules: [
'@nuxtjs/axios',
],
axios: {
// proxyHeaders: false
}
}
3.在提供context(上下文对象)
中取得$axios
Component
async asyncData({ $axios }) {
const ip = await $axios.$get('http://icanhazip.com')
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 === 20000) {
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 === 400) {
redirect('/404')
} else if (code === 500) {
redirect('/500')
}
})
}
5.添加插件到nuxt.config.js
配置文件
plugins: [
'@/plugins/axios'
],
第二种 直接引入axios,并模块化请求
1.npm安装
npm install axios
2.创建Axios扩展request.js
在/api/request.js
主要做了3件事,
- 创建axios实例 - 增加request拦截器,在请求发出前做自定义处理,比如加上token,sessionID - 增加response拦截器,收到响应信息后判断响应状态,如果出错可以使用Message组件提示 - PS:在AsyncData方法中调用时,在服务器端执行,没有UI,所以无法进行UI展示提示.所以需要通过process.server
变量判断当前环境是不是服务器
/api/request.js
/**
* 封装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: 5000 // 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 === 20000) {
// 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: 2 * 1000
})
return Promise.reject(new Error(res.msg || 'Error'))
}
},
error => {
console.log('err' + error) // for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default service //导出封装后的axios
3.创建API接口文件
创建API接口文件,抽出所有模块的异步请求 - 将同模块的请求写在一起,将ajax请求和页面隔离 - 如果后端API调整,只需要修改对应接口文件
/api/blog.js
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组件使用
/pages/detail/_id.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进行异步数据请求hoody.tech