NuxtJS 中 Axios 二次封装

小知识，大挑战！本文正在参与「程序员必备小知识」创作活动

基于NuxtJS 2.x构建的项目实现，使用的是@nuxtjs/axios 为 ^5.3.6

@nuxtjs/axios 特点：

✓ 无论是客户端还是 server 端，自动设置 base URL
✓ 在$axios 对象上暴露 setToken 函数方法，能轻而易举的设置认证 tokens
✓ 自动启用 withCredentials 特性当请求发送到 base URL 时
✓ SSR 模式下代理头信息 (Useful for auth)
✓ Fetch 风格的请求
✓ 和 Nuxt.js 的 Progressbar 完美结合
✓ 支持 Proxy Module
✓ 自动重试机制 axios-retry

配置

在 nuxt.config.js 文件中配置

// 1. 安装 @nuxtjs/axios
npm install @nuxtjs/axios --save

// 2. 配置 nuxt.config.js
module.exports = {
  plugins: [{ src: "~plugins/axios" }],
  modules: ["@nuxtjs/axios"],
  server: {
    port: process.env.PORT || 3000,
    host: "0.0.0.0",
  },
  axios: {
    proxy: true, // 代理
    baseURL: `http://${process.env.HOST || "localhost"}:${
      process.env.PORT || 3000
    }`,
  },
};

axios 二次封装

可配置基本属性：如 baseURL、timeout、withCredentials 等等
请求拦截器：在发送请求之前做些什么，如添加 token 或者是其他公共参数
响应拦截器：对响应数据做点什么，如根据与后端定义的返回码统一报错，弹出错误提示等
错误处理：根据状态码或者其他表示进行区分处理，返回不同的错误信息，统一处理

// plugins/axios.js 文件
export default ({ $axios, redirect }) => {
  // 基本配置
  $axios.defaults.timeout = 10000

  // 请求拦截器
  $axios.onRequest((config) => {
    // console.log('Making request to ' + config.url)
    return config;
  });

  // 响应拦截器
  $axios.onResponse((resp) => {
    return Promise.resolve(resp.data);
  });

  $axios.onError((error) => {
    const code = parseInt(error.response && error.response.status);
    if (code === 404 || code === 500) {
      redirect("/error");
    }

    return Promise.reject(error);
  });
};

使用

export default {
  asyncData({ query, $axios }) {
    $axios.post("xxx", params).then(() => {});
  },
  mounted() {
    this.$axios.post("xxx", params).then(() => {});
  },
};