nuxt中使用axios

安装

npm i @nuxtjs@axios

在 plugin 下创建 axios.js 并配置

目的：对 axios 进行简单的封装。

import { message } from 'ant-design-vue/lib'
export default function ({store, redirect, app:{$axios}}){
  // 数据访问前缀
  $axios.default.baseURL = 'http://test.com/api'
  // request  请求拦截器，此处设置了一个 token为例
  $axios.onRequest(config =>{
      config.header.common['X-Access-Token'] = store.state.token
  })
  $axios.onError = (error => {
  })
  // response 响应拦截器，数据返回后，在这里进行简单的处理之后返回
  $axios.interceptors.response.use(response => {
    if(response.data.success === false){
        if(response.data.errMsg === '未登录'){
          redirect('/login')
      }
      return message.error(response.data.errMsg)
    }else if{
        message.success(response.data.errMsg)
    }else{
      return response.data
    }
  })
}

配置 nuxt.config.js

module.exports = {  
  plugins:[
      '~/plugin/axios' // 封装的 axios 方法
    ],
  modules: [
    '@nuxtjs/axios'
  ],
// -----------
// 需要使用代理
  axios: {
    profix: '/api', // 在请求路径前面加上 api
    proxy: true
  },
  proxy: {
      '/api': {
        target: 'http://test.com', // 代理的地址
       pathRewrite: {
           '^/api': '' // 对 api 进行替换
       }
    }
  }
// -----------
}
/*
当我们使用axios发送请求时
 如果你使用axios发送请求且路径是/helo/hello, 
 那么会被axios中的prefix属性加上前缀,即/app/helo/helo
 而proxy会使得请求变为，http://127.0.0.1:8080/app/helo/helo 
 而pathRewrite会把请求变为 http://127.0.0.1:8080/test/helo/helo
*/

在 非ssr 中使用，和在vue 中使用是一样的

getData(){
    this.$axios.get('/getlist')
      .then(res =>{
            this.list = res.data      
      })
}

ssr 中使用，也就是在渲染页面之前把数据返回

// list.vue
export default{
  data(){
    // 定义好 需要使用的数据
      return {
        // 博客列表数据
      blogList:[], 
      // 博客总条数
      blogTotal:0,
      // 友情链接数据
      friendList:[],
    }
  },
    async asyncData(context){ // 这个 context 可以当作 this 来使用
    let params = {
        page: 1,
      blogCid: '1'
    }
    // 请求数据
      let [ res1, res2 ] = await Promise.all([
        context.$axios.post('/getlist', params)
          .then(res =>{
            return res
        });
      context.$axios.get('/api')
            .then(res =>{
              retrn res
          })
    ])
    // 返回数据
    return {
        blogList: res1.data,
      bolgTotal: res1.total * 1,
      friendList: res2.data
    }
  }
}