nuxt.js2网络请求封装

使用axios做网络请求

在plugins下新建文件axios.js

export default function ({ $axios, redirect,$cookies }) {
  $axios.setBaseURL('http://120.25.171.67:3000')
  // $axios.setHeader('Authorization', 'token')
  $axios.onRequest((config)=>{
    // config.headers['Authorization'] = "token";
    const token = $cookies.get('token');
    // 检查token是否存在
    if (token) {
      console.log(token);
      // 如果token存在，将其添加到请求头中
      config.headers.common['Authorization'] = `Bearer ${token}`;
    } else {
      // 如果token不存在，可以选择重定向或执行其他操作
      // redirect('/login');
      console.log("cookies不存在");
    }
    return config;
  })
  $axios.onResponse((response)=>{
    return response;
  })
  $axios.onError(error => {
    console.log(error);
    // const code = parseInt(error.response && error.response.status)
    // if (code === 400) {
    //   redirect('/400')
    // }
  })
}

export default function ({ $axios, redirect,$cookies }) {
  $axios.setBaseURL('http://120.25.171.67:3000')
  // $axios.setHeader('Authorization', 'token')
  $axios.onRequest((config)=>{
    // config.headers['Authorization'] = "token";
    const token = $cookies.get('token');
    // 检查token是否存在
    if (token) {
      console.log(token);
      // 如果token存在，将其添加到请求头中
      config.headers.common['Authorization'] = `Bearer ${token}`;
    } else {
      // 如果token不存在，可以选择重定向或执行其他操作
      // redirect('/login');
      console.log("cookies不存在");
    }
    return config;
  })
  $axios.onResponse((response)=>{
    return response;
  })
  $axios.onError(error => {
    console.log(error);
    // const code = parseInt(error.response && error.response.status)
    // if (code === 400) {
    //   redirect('/400')
    // }
  })
}

在根目录新建api文件夹，里面创建api.js文件

export const getData = (request,data)=>{
    return request.$get('/articles',data)
}

export const getData = (request,data)=>{
    return request.$get('/articles',data)
}

页面调用

import {getData} from "@/api/api"
export default {
    async asyncData({$axios,app}) {
        console.log(app);
        let res = await getData($axios)
        // app.$cookies.set('token','token')
        // console.log(res);
          return{
          	list : res.articles
          }
      },
}

import {getData} from "@/api/api"
export default {
    async asyncData({$axios,app}) {
        console.log(app);
        let res = await getData($axios)
        // app.$cookies.set('token','token')
        // console.log(res);
          return{
          	list : res.articles
          }
      },
}

nuxt.js2网络请求封装 ​

nuxt.js2网络请求封装