nuxtjs中使用axios

最近使用nuxtjs服務端渲染框架，在異步請求時遇到兩個問題，一是怎么使用axios， 二是怎么在asyncData方法中使用axios

當使用腳手架create nuxt-app創建項目時，會提示是否集成axios， 如果不選擇，后面則使用方式一請求異步數據，如果選擇,后面則使用方式二請求異步數據

如上圖，按照提示到選擇axios的步驟，鍵盤"up", "down"移動箭頭，space空格鍵選擇或者取消, 然后繼續enter進入下一步即可。

方法一：普通的方式 

1 .npm或者yarn安裝依賴包

$ npm install axios -S

2 . 引入到組件中

 

import axios from 'axios';

export default {
  /* 其他代碼 */
   // 使用Promise 
   asyncData ({params}) {
      return axios.get(`https://maoyan.com/ajax/cities`)
         .then(res => {
             console.log(res)
          })    
  }
      
  // 使用 async ... await  ， 與Promise選擇一種即可
  async asyncData({params}) {
    let { res } = await axios.get(`https://maoyan.com/ajax/cities`) 
    console.log(res)    
  }
    
  /*其他代碼*/
}

 

方法二：集成的方式

　　首先需要在配置文件nuxt.config.js中配置axios項

modules: [
    '@nuxtjs/axios',
    '@nuxtjs/bulma'
],
  /* 需要使用 aixos必須配置以下兩項axios和proxy*/
  axios: {
    prefix: '/api/',
    proxy: true
},

proxy: {
    '/api/': {
      target: 'https://maoyan.com/',
      pathRewrite: {
        '^/api/': ''
      }
    }
 },

 

在組件中使用axios， 無需在import引入, 直接使用this.$axios即可

// 這里引入context是上下文參數，代替了this，
// 因為在asyncData方法是在組件初始化時調用，所以沒法通過this來引用組件實例對象。
asyncData(context) {
    return context.$axios.get('ajax/cities')
      .then(res => {
        console.log(res)
      })
  }