axios二次封装及对应说明

riyue666

已于 2024-04-07 16:36:42 修改

阅读量361

点赞数 1

分类专栏： axios 文章标签：前端 javascript 开发语言

于 2023-07-21 17:53:33 首次发布

本文链接：https://blog.csdn.net/qq_63605379/article/details/131857268

版权

axios 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章介绍了如何在JavaScript中使用axios库进行网络请求的封装，包括创建实例、设置基础路径和超时时间，添加请求和响应拦截器以处理公共参数和错误情况，特别是对HTTP错误状态的处理和使用ElementPlus的ElMessage组件展示错误信息。

摘要由CSDN通过智能技术生成

先引入 axios

import axios from 'axios'

第一步：创建实例

利用axios对象的create方法，去创建axios实例(主要配置：基础路径、超时时间)

let request = axios.create({
  //基础路径
  baseURL:'', //这里写的是你自己接口的基础路径
  timeout:5000  //超时时间
})

第二步：request实例添加请求拦截器

request.interceptors.request.use((config)=>{
  //返回一个配置对象
  //config配置对象，有一个 headers属性的请求头，经常给服务端携带公共参数
  return config
})

第三步： request实例添加响应拦截器

//第三步 request实例添加响应拦截器
request.interceptors.response.use((response)=>{
  //成功的回调
  //简化数据
  return response.data
},
(error)=>{
  //失败的回调：一般处理http网络错误
  return Promise.reject(error)
})

全部展示

//进行axios二次封装
import axios from 'axios'
import { ElMessage } from "element-plus";
//第一步：利用axios对象的create方法，去创建axios实例(主要配置：基础路径、超时时间)
let request = axios.create({
  //基础路径
  // baseURL:import.meta.env.VITE_APP_BASE_API,
  timeout:5000  //超时时间
})

//第二步 ：request实例添加请求拦截器
request.interceptors.request.use((config)=>{
  //返回一个配置对象
  //config配置对象，有一个 headers属性的请求头，经常给服务端携带公共参数
  return config
})

//第三步 request实例添加响应拦截器
request.interceptors.response.use((response)=>{
  //成功的回调
  //简化数据
  return response.data
},
(error)=>{
  //失败的回调：一般处理http网络错误
  //定义一个变量：存储网络错误信息
  let message =''
  let status=error.response.status
  switch(status){
    case 401:
      message ='TOKEN过期'
      break
    case 403:
      message="无权访问"
      break
    case 404:
      message="请求地址错误"
      break
    case 500:
      message ="服务器出现了错误"
      break
    default:
      message="网络出现问题"
      break
  }
  //提示的错误信息
  ElMessage({
    type:'error',
    message
  })
  //这里需要返回一个失败的promise对象来终结
  return Promise.reject(error)
})

//对外暴露 
export default request