Skip to content

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
          }
      },
}

程序员小洛文档