VUE局部封装axios接口

最新推荐文章于 2022-12-03 22:11:59 发布

marsur

最新推荐文章于 2022-12-03 22:11:59 发布

阅读量516

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/marsur/article/details/103215263

版权

本文介绍了如何在Vue项目中进行axios接口的局部封装，包括创建api文件夹、编写js文件封装接口、在组件中引入并调用这些接口，简化HTTP请求操作。

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

1.在src目录下新建api文件夹，新建js文件

2.封装axios接口

import axios from "axios";
import router from "../router";
import {Dialog} from "vant";

//请求拦截器
let instance = axios.create({
  baseURL:"https://baby.xmn.top",   //接口所在域名，将会和传递过来的url进行拼接
  timeOut:5000    //过期时间
});

//设置请求拦截
instance.interceptors.request.use(config => {
//判断是否存在token，如果存在将每个页面的header都添加token
  if(localStorage.getItem(sessionStorage.getItem("id")+'_admin_token')){
    config.headers.common['XX-Device-Type']="mobile";
    config.headers.common['XX-Token']=localStorage.getItem(sessionStorage.getItem("id")+'_admin_token')
  }
  return config;
}, error => {
// 请求错误
  return Prom