NuxtJS如何利用axios异步请求

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

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

2、配置 nuxt.config.js

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

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') }) }