axios 封装以及拦截器

本文介绍了在Vue项目中如何进行axios的封装,包括设置基本路径和超时时间,并详细阐述了如何配置请求和响应拦截器。在请求拦截中,可以处理全局loading和token;响应拦截器则用于清除loading,处理token过期及错误编码字典。
摘要由CSDN通过智能技术生成

axios 封装

  1. 先创建 utils 文件夹
  2. 创建 request.js
  3. 引入 axios
  4. 配置 基本路径和超时时间
  5. 配置请求拦截和响应拦截
  6. 在请求拦截里可以放 loading 和 token
  7. 在响应拦截中 可以 清除 loading 还有处理错误编码字典
  8. 最后把我们封装的 axios 实例 导出
先在src里边创建一个utils文件夹,然后在里边创建一个request.js,最后编写下边的代码
`import axios from "axios";  //引入axios
import { Toast } from "vant";  //引入vant  loading动画
import router from "../router";  //引入路由

const instance = axios.create({
  baseURL: "https://api.it120.cc/small4",   //公共地址
  timeout: 5000,    //超时间
});

instance.interceptors.request.use(
  (config) => {
    Toast.loading({
      message: "加载中",
      duration: 0, // toast不消失
    });
    config.headers.Authorization = localStorage.getItem("token");
    //给请求的头信息 配置一个Authorization(这个名字是根据后端给的接口文档定一般叫这个又的时候也叫token)字段是我们的token

    return config;
  },
  (err) => {
    Promise.reject(err)
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值