电商系统基于nuxt的axios封装代码分享

最新推荐文章于 2025-09-14 18:46:41 发布

原创

最新推荐文章于 2025-09-14 18:46:41 发布 · 522 阅读

2 ·

CC 4.0 BY-SA版权

背景

在电商系统中，一些场景需要使用nuxt服务器端渲染技术，如首页、商品详情页等等，目的是为了弥补vue单页的seo的不足。

基于nuxt项目的api请求需要处理服务器端请求、客户端请求分离，权限拦截，token统一传递等逻辑，本文以javashop电商系统中的代码为例，分享相关经验。

一先引入

首先创建一个resquest.js，这里面存放的是axios配置以及拦截器，最后导出一个axios对象

import Vue from 'vue'
import axios from 'axios'
import https from 'https'
import { Loading } from 'element-ui'
import { api } from '@/ui-domain'
import Storage from '@/utils/storage'
import checkToken from '@/utils/checkToken'
const qs = require('qs')

二创建axios实例，并且添加默认的配置

const service = axios.create({
  timeout: 8000,     // 请求超时时间
  baseURL: api.buyer, // 后端API，用于在服务器端进行请求
  httpsAgent: new https.Agent({
    rejectUnauthorized: false
  }),
  paramsSerializer: params => qs.stringify(params, { arrayFormat: 'repeat' })
})