Appearance
nuxt.js2网络请求封装
使用axios做网络请求
在plugins下新建文件axios.js
js
export default function ({ $axios, redirect,$cookies, route }) {
$axios.setBaseURL('http://localhost:3000')
// $axios.setHeader('Authorization', 'token')
$axios.onRequest((config)=>{
// config.headers['Authorization'] = "token";
const token = process.client ? $cookies.get('token', { fromRes: true }) : '';
// 检查token是否存在
if (token) {
// 如果token存在,将其添加到请求头中
config.headers.Authorization = `Bearer ${token}`;
} else {
// 如果token不存在,可以选择重定向或执行其他操作
redirect('/login');
console.log("cookies不存在");
}
return config;
})
$axios.onResponse((response)=>{
return response.data;
})
$axios.onError(error => {
const code = error.response?.status;
if (code === 401) {
$cookies.remove('token');
redirect('/login?redirect=' + encodeURIComponent(route.path));
} else if (code === 404) {
redirect('/404');
}
// 统一错误提示(可根据项目使用 toast 或 message 组件)
return Promise.reject(error);
// const code = parseInt(error.response && error.response.status)
// if (code === 400) {
// redirect('/400')
// }
})
}
export default function ({ $axios, redirect,$cookies, route }) {
$axios.setBaseURL('http://localhost:3000')
// $axios.setHeader('Authorization', 'token')
$axios.onRequest((config)=>{
// config.headers['Authorization'] = "token";
const token = process.client ? $cookies.get('token', { fromRes: true }) : '';
// 检查token是否存在
if (token) {
// 如果token存在,将其添加到请求头中
config.headers.Authorization = `Bearer ${token}`;
} else {
// 如果token不存在,可以选择重定向或执行其他操作
redirect('/login');
console.log("cookies不存在");
}
return config;
})
$axios.onResponse((response)=>{
return response.data;
})
$axios.onError(error => {
const code = error.response?.status;
if (code === 401) {
$cookies.remove('token');
redirect('/login?redirect=' + encodeURIComponent(route.path));
} else if (code === 404) {
redirect('/404');
}
// 统一错误提示(可根据项目使用 toast 或 message 组件)
return Promise.reject(error);
// const code = parseInt(error.response && error.response.status)
// if (code === 400) {
// redirect('/400')
// }
})
}
在根目录新建api文件夹,里面创建api.js文件
js
import request from '@/utils/request'
export const getData = (data)=>{
return request.$get('/articles',{params: data})
}
export const createArticle = (data) => {
return $axios.$post('/articles', data)
}
import request from '@/utils/request'
export const getData = (data)=>{
return request.$get('/articles',{params: data})
}
export const createArticle = (data) => {
return $axios.$post('/articles', data)
}
页面调用
js
import {getData} from "@/api/api"
export default {
async asyncData({$axios}) {
let res = await getData({ page: 1, limit: 10 })
// console.log(res);
return{
list : res.articles
}
},
}
import {getData} from "@/api/api"
export default {
async asyncData({$axios}) {
let res = await getData({ page: 1, limit: 10 })
// console.log(res);
return{
list : res.articles
}
},
}