vue封装axios踩坑笔记

安装axios

自己在掘金上搜索吧，安装的步骤就不写了，写点踩坑重点。

新建http.js，封装http post get请求

import axios from 'axios'; // 引入axios
import QS from 'qs'; // 引入qs模块，用来序列化post类型的数据，后面会提到
// 引入前端 vant 组件，可以根据自己需要引用
import { Toast } from 'vant'; // vant的toast提示框组件
// 引入 store
import store from '../plus/store';
// 引入 router
import router from '../plus/router';

请求地址根据开发环境变换

// 环境切换的请求地址变换
if (process.env.NODE_ENV == 'development') { // 开发环境
    // 本地跨域测试
    // 在vue.config.js中定义proxy
    // 详见[传送门](https://juejin.cn/post/6844904186182631432)
    axios.defaults.baseURL = '/apis';
}else if (process.env.NODE_ENV == 'debug') { // 调试环境
	axios.defaults.baseURL = 'bug.ungang.cn';
}else if (process.env.NODE_ENV == 'production') { // 生产环境
	axios.defaults.baseURL = 'https://work.ungang.cn';
}

post请求头的设置

// post请求头的设置
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

请求拦截器

// 请求拦截器
axios.interceptors.request.use(
	config => {
		// 每次发送请求之前判断vuex中是否存在token
		// 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
		// 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断 
		const token = store.state.token;
		token && (config.headers.Authorization = token);
		return config;
	},
	error => {
		console.log(error);
		Promise.reject(error);
});

响应拦截器

axios.interceptors.response.use(
	response => { 
		// 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据 
		// 否则的话抛出错误
		if (response.status === 200) {
			return Promise.resolve(response);
		} else {
			return Promise.reject(response);
		}
	},
	// 服务器状态码不是2开头的的情况
	error => {
		if (error.response.status) {
			switch (error.response.status) {
				// 401: 未登录
				case 401:
					// 清除token
					localStorage.removeItem('token');
					store.commit('set_token', null);
					// 并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面 
					store.commit('set_login_after_path',router.currentRoute.fullPath)
					// 登陆函数 goLogin();
					break;

				// 403 token过期
				// 登录过期对用户进行提示
				// 清除本地token和清空vuex中token对象
				// 跳转登录页面
				case 403:
					// 清除token
					localStorage.removeItem('token');
					store.commit('set_token', null);
					// 并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面 
					store.commit('set_login_after_path',router.currentRoute.fullPath)
					// 跳转登录页面
					goLogin(); 
					break;
					
				// 其他错误，直接抛出错误提示
				default:
					Toast({
						message: error.response.data.message,
						duration: 1500,
						forbidClick: true
					});
			}
			return Promise.reject(error.response);
		}
	}
);

请求方法函数

get方法

/**
 * get方法，对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function get(url, params){
	return new Promise((resolve, reject) =>{
		axios.get(url, {
			params: params
		}).then(res => {
			res = res.data;
			if(res.errcode == 0){
				resolve(res.data);
			}else{
				reject(res);
			}
		}).catch(err =>{
			Toast({
				message: err,
				duration: 1000,
				forbidClick: true
			});
		})
	});
}

post方法

/** 
 * post方法，对应post请求 
 * @param {String} url [请求的url地址] 
 * @param {Object} params [请求时携带的参数] 
 */
export function post(url, params) {
	return new Promise((resolve, reject) => {
		axios.post(url, QS.stringify(params))
		.then(res => {
			res = res.data;
			if(res.errcode == 0){
				resolve(res.data);
			}else{
				reject(res);
			}
		})
		.catch(err =>{
			Toast({
				message: err,
				duration: 1000,
				forbidClick: true
			});
		})
	});
}

使用方法

import { get,post } from './http';