vue3：axios封装与使用

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，说明接口请求成功，可以正常拿到数据
		// 否则的话抛出错误