第一种：使用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')
})
}