nuxt——nuxt.axios的使用
bug:localStorage不存在在SSR中,created生命周期在服务端执行,node环境中没有localStorage所以会报错,将需要使用localStorage的代码放到浏览器使用的生命周期(mounted)中。配置文件配置axios文件不在服务端渲染 { src: ‘@/plugins/axios’, ssr: false }axios封装 plugins/axios.jsimpo
·
bug:localStorage不存在
- 在SSR中,created生命周期在服务端执行,node环境中没有localStorage所以会报错,
- 将需要使用localStorage的代码放到浏览器使用的生命周期(mounted)中。
- 配置文件配置axios文件不在服务端渲染 { src: ‘@/plugins/axios’, ssr: false }
axios封装 plugins/axios.js
let mesId = ''
import { Message, Notification } from 'element-ui'
export default ({ $axios, app, store }) => {
//Request拦截器,设置token
$axios.onRequest((config) => {
config.headers['Authorization'] = store.state.token
config.headers['Classid'] = store.state.classId
config.baseURL = '/prod-api'
})
$axios.onResponse((response) => {
if (response.data.code === 200) {
return Promise.resolve(response.data)
} else if (response.data.code === 401) {
// 解决同一个页面接口过多一大推提示
if (!mesId) {
mesId = Message.warning('请登录后再操作');
let id = setTimeout(() => {
mesId = ''
clearTimeout(id)
}, 5000)
}
store.commit('exitLogin')
app.$bus.$emit('toLogin')
} else if (response.data.type != undefined) {
return Promise.resolve(response.data)
} else {
Message.error(response.data.msg);
return Promise.reject(response.data)
}
})
// 错误回调
$axios.onError((error) => {
})
}
nuxt.config.js
plugins: [
'@/plugins/element-ui',
{ src: '@/plugins/utils', ssr: false },// axios.js文件关闭服务端渲染
{ src: '@/plugins/axios', ssr: false }, // axios.js文件关闭服务端渲染
{ src: "~/plugins/swiper.js", ssr: false },
{ src: '~/plugins/store-cache', ssr: false },
{ src: '~/plugins/flexiable.js', ssr: false },
{ src: '@/plugins/bus', ssr: false },
{ src: '~plugins/echarts', ssr: false },
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
'@nuxtjs/axios',
'@nuxtjs/proxy'
],
// 需要代理,可以打开底下的注释
axios: {
proxy: true // Can be also an object with default options
},
proxy: {
'/prod-api': {
changeOrigin: true,
// target: 'http://192.168.2.81:8087', //康康
// target: 'http://192.168.2.90:8087', //京邦
// target: "http://192.168.2.190:8087", //康颂
"target": "http://192.168.0.19:1002", // 测试
pathRewrite: {
'^/prod-api': ''
}
}
},
调用接口
async asyncData ({ params, $axios }) {
const { data } = await $axios.get(`/articles/index?pageIndex=1`)
return { data, page: 1 }
}
async asyncData ({ params, $axios }) {
const [articles, category] = await Promise.all([
$axios.$get(`/articles/category/${params.id}`),
$axios.$get(`/categories/${params.id}`)
])
}
this.$axios.get('url', { params:{} })
this.$axios.post('url', {})
// ****** put请求有三种传参方式
// 1、url/id
// 2、post传参 url,data
// 3、get传参 url,null,{params:data} 第二个参数需要传null
this.$axios.put('/course/periodUser', {
periodId: id,
watchDuration: time
}).then(res => { })
this.$axios.put('/system/user/profile/updatePwd', null, {
params: {
oldPassword: this.user.oldPassword,
newPassword: this.user.newPassword
}
}).then(response => {
this.$modal.msgSuccess("修改成功");
this.$refs["form"].resetFields();
}
);
this.$axios.delete('/exam/exam-history/record/' + id).then(res => {});
更多推荐
所有评论(0)