vue3：axios封装与使用

sunly_

已于 2023-11-06 09:21:16 修改

阅读量5.9k

点赞数 6

分类专栏： vue3 文章标签：前端 javascript 开发语言 vue3.0 vue.js

于 2022-03-16 15:05:43 首次发布

本文链接：https://blog.csdn.net/qq_40745143/article/details/123526023

版权

本文介绍了如何在Vue3项目中进行axios的封装，包括npm安装、封装axios.js、在main.js中全局引入并注入全局方法，以及在页面中如何正确使用axios请求接口并渲染数据。特别强调了在Vue3中访问全局上下文的方式，指出在开发阶段使用代替可能产生的错误，并提供了错误写法及官方文档的正确解决方案。

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

1、npm安装

cnpm install axios -S
cnpm install qs  -S

2、封装axios.js

//router
import router from "../router/index.js"; //引入路由对象
import {
    Toast } from 'vant'; // 提示框

// axios
import axios from 'axios'
import qs from "qs";
import {
    baseURL } from './common.js' // 接口域名
axios.defaults.baseURL = baseURL;
axios.defaults.timeout = 10000; //超时毫秒 60s
axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest';
axios.defaults.withCredentails = true;

// axios请求拦截
axios.interceptors.request.use(config => {
   
	// 在发送请求之前做些什么:
	// 如果需要在header头中传token，使用下边这段代码
	if(localStorage.getItem('token')){
   
		config.headers['token'] = localStorage.getItem('token');
	}

	// 如果需要显示loading
	// Toast.loading({
   
	//     // icon: require('../images/icons/loading.gif'),
	//     duration: 0, // 持续展示 toast
	//     forbidClick: true, // 禁用背景点击
	//     mask: false, // 是否显示遮罩层
	//     // message: '数据加载中...',
	// });

	// 特定接口不显示数据加载中
	// if (config.url.includes('/api/mobile/index.php?w=member_favorites&t=favorites_add')) {
   
	//     // 清除加载动画
	//     Toast.close();
	// } else {
   
	//     Toast.loading({
   
	//         duration: 0, // 持续展示 toast
	//         forbidClick: true, // 禁用背景点击
	//         mask: false, // 是否显示遮罩层
	//         message: '数据加载中...',
	//     });
	// }

	return config;
}, error => {
   
	// 对请求错误做些什么
	return Promise.reject(error);
})


// axios响应拦截器
axios.interceptors.response.use(
	response => {
   
		// 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
		// 否则的话