HTTPS请求与响应拦截实践-优快云博客

本文详细介绍了一种在前端项目中实现HTTPS请求的方法，并通过axios库进行请求与响应的全局拦截，确保了每次请求都能自动携带本地存储的token，同时实现了加载进度条效果及错误状态码的统一处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、在src下创建一个Https的文件
加粗样式
在api.js中

import service from './index';
export default { 
 //写请求
  login({ username, password }: { username: string, password: string }) {
  },
  getDate({pagenum,pagesize,query}:{pagenum:number|string,pagesize:number|string,query?:string}){

  }
}

index.js

import axios, { AxiosInstance, AxiosRequestConfig, AxiosError, AxiosResponse } from 'axios'

import nProgress from 'nprogress'
import nprogress from 'nprogress';


const service: AxiosInstance = axios.create({
  baseURL: 'http://v.juhe.cn/', //基础路径
  timeout: 10000
})


// 请求拦截: 每一次发请求都会做的事情
service.interceptors.request.use((config: AxiosRequestConfig): AxiosRequestConfig => {
  nProgress.start()
  let token = localStorage.getItem('token')
  config.headers['Authorization'] = token
  return config
}, (err: AxiosError) => {
  console.log(err)
  return Promise.reject(err)
})

//响应拦截

service.interceptors.response.use((res: AxiosResponse): AxiosResponse => {
  return res.data
}, (err: AxiosError) => {
  if (err.response && err.response.status) {
    nprogress.done()
    console.log(err)
    // 错误请求的状态码
    let status = err.response.status
    //   if (status === 400) {
    //     Message.error('参数错误')
    //   }
    //   if (status === 401) {
    //     Message.error('登录过期,请重新登录')
    //   }
    //   if (status === 403) {
    //     Message.error('没有权限')
    //   }
    //   if (status === 404) {
    //     Message.error('接口路径错误')
    //   }
    //   if (status === 500) {
    //     Message.error('服务器出错')
    //   }
    //   if (status === 503) {
    //     Message.error('服务器在维护')
    //   }
    // }
    return Promise.reject(err)
  }
})

export default service

在router.js 加入

const isPro: boolean = process.env.NODE_ENV === 'production'

const router = createRouter({
  //history路由模式
  history: isPro ? createWebHashHistory(process.env.Base_URL) : createWebHistory(process.env.BASE_URL),
  routes
});