Nuxt - 超详细 @nuxtjs/axios 介绍封装请求及拦截器配置（脚手架自带请求库）

前言

网上的大部分教程杂乱无章毫无逻辑可言，本文将高质量完成 @nuxtjs/axios 自带请求库的配置。

虽然脚手架帮我们安装了官方请求库，

但是后续的请求地址、跨域配置、Token 携带、服务器报错跳转页面、拦截器、请求（前 / 后）操作、错误处理并没有给我们提供示例。

再加上文档非常零散，很多朋友根本无从下手。

---

本文将 从 0 -1 项目首次创建到最终可使用请求，完成真实可用且健壮的项目常见配置，

你最终将这样使用请求：

// GET
this.$axios.get('/api/list?name=' + '参数').then(res => {
  console.log(res)
})
    
// POST
this.$axios.post('/api/list', { name: '参数' }).then(res => {
  console.log(res)
})
1
2
3
4
5
6
7
8
9

第一步

😃 nuxt / axios 官网： https://axios.nuxtjs.org/，可提供给您额外思路。

首先，您要确保项目已经正常安装该请求库，

打开您项目下的 package.json 文件，检查 dependencies 字段：

如果存在则安装正常，否则您需要重新安装或创建新项目。

第二步

该步骤主要是配置一下拦截器、请求前、请求后、错误处理等等。

打开项目根目录，在 plugins 文件夹下，

创建 axios.js 文件，一键复制 写入（请您自行更改）以下代码，

// 请您自行根据需求进行更改。

// 可以引入一个提示信息的消息组件(根据自己的UI框架选择)
// import { notification } from 'ant-design-vue'

// $axios: 实例
// redirect: 如果需要跳转页面(比如登录页), 
// 可以从 nuxt 中拿到 redirect 函数即可, 跳转: redirect('/user/login')
export default function ({ $axios, redirect }) {
    
    // 在请求之前做一些事情
    $axios.onRequest(config => {

        // config: 请求前的东西啥都有(自己打印看一下)
        // console.log(config)

        // 例如: 在请求头中添加token
        const token = 'XXXXXXXXXXX'
        if(token) {
            config.headers['token'] = token
        }

        // return
        return config
    })    


    // 获取数据后做一些事情
    $axios.onResponse(response => {

        // response: 请求数据也在里面(啥都有)
        console.log(response)
        
        // 例如: 判断一下状态码是否正常
        switch(response.data.code) {
            case 200 :
                // console.log('ok') 
            break;
            case 408 :
                // console.log('返回错误') 
            break;
            default:
                // console.log('未知错误') 
            break;
        }

        // return
        return response
    })  


    // 请求失败(服务器报错),做一些事情
    $axios.onError(error => {

        // error: 错误详细信息(啥都有)
        // console.log(error.response.config)

        // 获取状态码
        const code = parseInt(error.response && error.response.status)

        // 如果服务器状态码不等于200(意味着接口废了)
        if(code != 200){
            // console.log('服务器报错了...')
            // 例如: 直接跳到错误页
            // redirect('/404')
         }
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

第三步

该步骤将我们上一步配置好的文件，“导入” 到项目中，全局使用上面的配置。

打开项目根目录下 nuxt.config.js 文件，

找到 plugins 字段，向其加入代码：

'~/plugins/axios'
1

第四步

该步骤主要是配置是否开启代理、请求前缀、跨域是否需要凭证等，这些配置将应用于所有请求的全局选项，官网文档（英文）中有更详细的配置讲解！

打开项目下 nuxt.config.js ，找到 axios 字段（没有手输一个），

按照如下代码，您自行进行 更改及选配。

// 不懂这些字段的话，直接复制，只改 baseurl 即可。
// 不懂这些字段的话，直接复制，只改 baseurl 即可。
axios: {
    timeout: 30000,//超时时间
    baseurl: 'http://xxx.net',//baseurl
    prefix: '/api',//配置请求接口前缀
    proxy: true,// 开启代理
}
1
2
3
4
5
6
7
8

紧接着，找到 proxy 字段（没有手输一个），按如下代码更改。

// 不懂这些字段的话，直接复制，只改 target 即可。
// 不懂这些字段的话，直接复制，只改 target 即可。
proxy: {
	"/api": {
		// 配置接口地址
		target: "http://xxx.net",//baseurl
		pathRewrite: {
			"^/api/":"/"
		},
		changeOrigin: true
	}
},
1
2
3
4
5
6
7
8
9
10
11
12

测试使用

注意：在开始之前，最好重启一下项目。

随便找个页面，按照给出的请求示例，

仿照着在你项目中，写出来。

<template>
  <div>
	...
  </div>
</template>

<script>
export default {

  data() {
    return {
		// 请求到的数据往这赋值即可
	}
  },

  mounted() {
    // GET
	this.$axios.get('/api/list?name=' + '参数').then(res => {
	  console.log(res)
	})
	    
	// POST
	this.$axios.post('/api/list', { name: '参数' }).then(res => {
	  console.log(res)
	})
  },
  
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

另外，想要通过 asyncData 方法进行的话，需要有其他配置，本文暂时不展开了。

写在后面

在nuxt中，有一个专门的axios版本：@nuxtjs/axios；但是由于nuxt的文档，或者说是资料不是很齐全（零散），初步了解后觉得这个插件并不是很方便，很多时候，我们都是模块化的axios写法，在使用@nuxtjs/axios时，会发现有点束手束脚，于是转而放弃使用，而是单独引入axios，然后一顿操作。

当我们单独封装axios的时候，有没有这种想法：报错了能不能跳转到nuxt的错误页面？；但是实现时发现，除了在asyncData这些方法里面可以解构到error对象然后利用它跳转，好像在单独的一个js文件里面，没办法直接跳转。

但是，如果我们使用@nuxtjs/axios，那么我们就可以做到，并且，还可以很优雅的解决跨域问题。

---

使用 nuxt 定制款 nuxt/axios ，相比原生 axios 有如下优势：

• 自动为客户端和服务器端设置baseURL
• 将setToken函数暴露给$axios，可以非常容易的进行全局Authentication tokens设置
• 基于baseURL发起请求时，自动启用withCredentials
• 添加用于服务器端渲染的Proxy请求Header
• 支持使用axios加载CSS
• 与Nuxt进度条集成
• 与Proxi模块集成
• 使用axios-retry自动重试请求