Home
avatar

.𝙃𝙖𝙣

Axios请求二次封装，兼容Typescript

617字 3.1分钟 Code

适合初学者配置使用，只封装了 get 和 post 其他类似patch、put和axios.all()的方法得自己动手了，如果遇到项目有多个baseURL的这套封装就显得很不灵活，但一般是不会遇到的，这套简单的封装总的来说够用了，且非常实用。
新建https.ts复制下面代码进去引用即可，如果是 js 版本的把 url
, param
后面的
去掉。

import axios from "axios";
import qs from "qs";

axios.defaults.timeout = 5000; //响应时间
axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=UTF-8"; //配置请求头
axios.defaults.baseURL = "http://192.168.0.6:9000"; //配置接口地址
//POST传参序列化(添加请求拦截器)
axios.interceptors.request.use(
	config => {
		//在发送请求之前做某件事
		if (config.method === "post") {
			config.data = qs.stringify(config.data);
		}
		return config;
	},
	error => {
		console.log("错误的传参");
		return Promise.reject(error);
	}
);

//返回状态判断(添加响应拦截器)
axios.interceptors.response.use(
	res => {
		//对响应数据做些事
		if (!res.data.success) {
			return Promise.resolve(res);
		}
		return res;
	},
	err => {
		if (err.response.status == 504 || err.response.status == 404) {
			console.log("服务器被吃了⊙﹏⊙∥");
		} else if (err.response.status == 403) {
			console.log("权限不足,请联系管理员!");
		} else {
			console.log("未知错误");
		}
		return Promise.reject(err);
	}
);

//返回一个Promise(发送post请求)
export function myPost(url: any, params: any) {
	return new Promise((resolve, reject) => {
		axios
			.post(url, params)
			.then(
				response => {
					resolve(response);
				},
				err => {
					reject(err);
				}
			)
			.catch(error => {
				reject(error);
			});
	});
}
////返回一个Promise(发送get请求)
export function myGet(url: any, param: any) {
	return new Promise((resolve, reject) => {
		axios
			.get(url, {
				params: param
			})
			.then(
				response => {
					resolve(response);
				},
				err => {
					reject(err);
				}
			)
			.catch(error => {
				reject(error);
			});
	});
}
export default {
	myPost,
	myGet
};

#axios 使用方法

<template>
	<div class="home"></div>
</template>

<script lang="ts">
	import { Component, Vue } from "vue-property-decorator";
	import https from "../https"; //1.引入
	@Component({
		data() {
			return {
				dataList: []
			};
		},
		created() {
			console.log(https);
			let param = {
				pageNo: 1,
				pageSize: 20
			};
			//2.使用
			https
				.myGet("/case/lists", param)
				.then(res => {
					console.log(res.data.dataList);
					this.dataList = res.data.dataList;
				})
				.catch(err => console.log(err));
		}
	})
	export default class Home extends Vue {}
</script>

#axios 拦截器指定页面添加 token

// 拦截request,/ 添加请求拦截器
axios.interceptors.request.use(
	function (config) {
		// 在发送请求之前做些什么
		if (config.url !== "login") {
			config.headers["Authorization"] = localStorage.getItem("token");
		}

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

接口请求错误处理(status !== 200),应用场景：全局拦截报错信息跳转指定页面（login、home）

//返回状态判断(添加响应拦截器)
axios.interceptors.response.use(
	res => {
		//对响应数据做些事
		if (!res.data.success) {
			return Promise.resolve(res);
		}
		return res;
	},
	error => {
		console.log("网络异常");
		console.log(error.response.status);
		//直接打印error打印不出来!!!!
		// console.log(error.response.data);
		// console.log(error.response.headers);

		return Promise.reject(error);
	}
);
Get Post Axios typescript