nuxt的axios

安装 "@nuxtjs/axios": "^5.13.6", "axios": "^0.24.0",

1.创建一个plugins文件，封装一下axios.js包

axios.js

export default ({ app: { $axios } }, inject) => {
    $axios.setHeader('Content-Type', 'application/x-www-form-urlencoded')
    $axios.setHeader('appkey', 'xuelejia_api_appkey_temp_test')
    $axios.defaults.timeout = 10000;
    $axios.defaults.baseURL = 'http://www.baidu.com/api';
      // 当需要跨域的时候使用下面这个
  inject('axiosApi', (url, params, method) => {
    return new Promise((resolve, reject) => {
      $axios({
        method: method || "POST",
        url: '/main' + url,
        data: qs.stringify(params)
      }).then(res => {
        resolve(res)
      }).catch(err => {
        reject(err)
      });
    })
  })
  inject('request', (url, params, method) => {
    return new Promise((resolve, reject) => {
      $axios({
        method: method || "POST",
        url: '/api' + url,
        data: qs.stringify(params)
      }).then(res => {
        resolve(res)
      }).catch(err => {
        reject(err)
      });
    })
  })
}

2.nuxt.config.js文件，引入axios

  plugins: [
    '@/plugins/element-ui',
    '@/plugins/axios'
  ],

  modules: [
    '@nuxtjs/axios',
  ],
  
  //要跨域加上下面这个
    axios: {
        proxy: true
  },

  proxy: {
    "/api": {
      target: 'http://www.guge.com',
      ws: true,
      changOrigin: true,
      pathRewrite: {
        "^/api": ""
      }
    },
    "/main": {
      target: 'http://api.baidu.com',
      ws: true,
      changOrigin: true,
      pathRewrite: {
        "^/main": ""
      }
    },
  },
  

3.在页面使用

getRecom() {
  this.$axiosApi(
    "/netcourse/index",
    {
      cid: "",
    },
    "POST"
  ).then((res) => {
   
  });
},

这种不能在子组件中使用，并且获取不到this,但推荐

  async asyncData(app) {
    let res = await app.$axios.get('/dictDetail/getDictDetailByName',{
        params:{
       
      }
    })
    return { questList: res.data }
  },
  

能在子组件中使用

    async mounted() {
        let res = await this.$axios.get('/dictDetail/getDictDetailByName')
    }