vue中axios的封装及使用，调接口，不同请求方式接口的调用

最新推荐文章于 2024-08-14 19:48:46 发布

甜十一

最新推荐文章于 2024-08-14 19:48:46 发布

阅读量682

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/zhaotian2017/article/details/122926803

版权

本文介绍了如何在Vue项目中使用Axios进行封装，详细讲解了从下载安装Axios到封装过程，以及如何在项目中调用不同请求方式的接口。通过阅读，你可以了解到如何有效地管理和调用后台提供的API接口。

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

1.下载及安装

npm install axios

2.axios的封装

import axios from 'axios';
import { Message } from 'element-ui';

// 导入 NProgress 包对应的JS和CSS
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

// const Url = "/";
// const Url = "http://27.50.136.43:8000"  //全局接口地址
const Url = window.location.origin

// 调用axios.create方法，配置一些属性，返回一个新的axios
const request = axios.create({
	// baseURL: Url,
	baseURL: Url,
	//请求超时时间
	timeout: 50000
});

// 请求拦截
request.interceptors.request.use(
	//config 代表是你请求的一些信息
	(config) => {
		NProgress.start();
		// 在请求发送之前的操作
		let token = window.localStorage.getItem('token');
		config.headers['Authorization'] = token;
        //全局参数设置
		let TenantId = window.localStorage.getItem('Tenant-Id');
		if (
			TenantId == null ||
			TenantId.trim() == '' ||
			TenantId =