NuxtJS如何利用axios异步请求

转载

mb5fed73533dfa9 2019-08-18 22:00:00

第一种：使用nuxt 提供的 Axios插件 @nuxtjs/axios

1、安装：npm install @nuxtjs/axios -d

　　安装@nuxtjs/proxy解决跨域问题：npm i @nuxtjs/axios @nuxtjs/proxy -D

2、配置 nuxt.config.js，proxy解决跨域问题

exports default {
  modules: [
    '@nuxtjs/axios',
  ]
}

axios: {
    proxy: true
  },
  server: {
    port: 3000, // default: 3000
    host: '0.0.0.0', // default: localhost
  },
  proxy: {
    '/api': {
      target: 'http://xxxx:8080/',
      changeOrigin: true,
      pathRewrite: {
        '^/api': '/'
      }
    }
  },

3、在提供的context(上下文对象)中取得$axios

async asyncData({ $axios }) {
  const ip = await $axios.$get('...')
  return { ip }
}

4、使用Nuxt plugin扩展Axios

　　nuxt会在vue.js程序启动前调用 plugins目录下的脚本，并且以context(上下文对象)作为参数，可以取到$axios

　　创建 plugins/axios.js 并定义axios的拦截器，定义请求的各个阶段需要进行的处理

export default function({ $axios, redirect }) {
  // request interceptor
  $axios.interceptors.request.use(
    config => {
      // do something before request is sent
      return config
    },
    error => {
      // do something with request error
      return Promise.reject(error)
    }
  )
  $axios.onRequest(config => {
    console.log('Making request to ' + config.url)
  })

  // response interceptor
  $axios.interceptors.response.use(
    /**
     * Determine the request status by custom code
     * Here is just an example
     * You can also judge the status by HTTP Status Code
     */
    response => {
      const res = response.data
      if (res.code === 20000) {
        return res
      } else {
        redirect('/404')
        // if the custom code is not 200, it is judged as an error.
      }
      return Promise.reject(new Error(res.msg || 'Error'))
    },
    error => {
      console.log('err' + error) // for debug

      return Promise.reject(error)
    }
  )

  $axios.onError(error => {
    const code = parseInt(error.response && error.response.status)
    if (code === 400) {
      redirect('/404')
    } else if (code === 500) {
      redirect('/500')
    }
  })
}

5、添加插件到nuxt.config.js配置文件

plugins: [
    '@/plugins/axios'
],

第二种：直接引入axios，并模块化请求，就像vue中那样使用

1、安装：npm install axios --save

2、创建Axios扩展request.js

　　在/api/request.js主要做了3件事：

创建axios实例
增加request拦截器,在请求发出前做自定义处理,比如加上token,sessionID
增加response拦截器,收到响应信息后判断响应状态,如果出错可以使用Message组件提示

　　PS：在AsyncData方法中调用时，在服务器端执行，没有UI，所以无法进行UI展示提示。所以需要通过process.server变量判断当前环境是不是服务器。

/**
 * 封装Axios
 * 处理请求、响应错误信息
 */
import { Message } from 'element-ui'  //引用饿了么UI消息组件
import axios from 'axios' //引用axios

// create an axios instance
const service = axios.create({
  baseURL: '/api/', // 所有异步请求都加上/api,nginx转发到后端Springboot
  withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

// request interceptor
service.interceptors.request.use(
  config => {
    // do something before request is sent
    // config.headers['-Token'] = getToken()
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  /**
   * If you want to get http information such as headers or status
   * Please return  response => response
   */

  /**
   * Determine the request status by custom code
   * Here is just an example
   * You can also judge the status by HTTP Status Code
   */
  response => {
    const res = response.data //res is my own data

    if (res.code === 20000) {
    // do somethings when response success
    //   Message({
    //     message: res.message || '操作成功',
    //     type: 'success',
    //     duration: 1 * 1000
    //   })
      return res
    } else {
      // if the custom code is not 200000, it is judged as an error.
      Message({
        message: res.msg || 'Error',
        type: 'error',
        duration: 2 * 1000
      })
      return Promise.reject(new Error(res.msg || 'Error'))
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service //导出封装后的axios

3、创建API接口文件

　　创建API接口文件，抽出所有模块的异步请求，将同模块的请求写在一起，将ajax请求和页面隔离，如果后端API调整，只需要修改对应接口文件

import request from './request'

/**
 * 获取博客详情
 * @param id 博客ID
 */
export function getBlog(id) {
  return request({
    url: 'blog/detail/' + id,
    method: 'get'
  })
}
/**
* 获取博客列表
* @param page 页码
* @param max 每页显示数量
*/
export function getList(page, max) {
  return request({
    url: 'blog/list',
    method: 'get',
    params: { page, max }
  })
}

4、vue组件使用

import { getBlog} from '~/api/blog'

 asyncData({ params, redirect}) {
    return getBlog(params.id) //直接使用API导出的方法进行请求
      .then(({ data }) => {
        return { blog: data }
      }).catch((e) => {  //从nuxt context 中获取 redirect 进行跳转
        redirect('/404')
      })
  }