axios的封装（超详细简易版）
1、安装 axios起首，通过 npm 安装 axios：
这里附上axios中文网：Axios中文文档 | Axios中文网
npm install axios
2、创建 axios 实例
在项目目录中新建一个 utils 文件夹，然后在内里创建一个 request.js 文件用于封装 axios。
//第一步我们先引入axios模块
import axios from "axios";
//这里的话有token的需求我们可以获取一下token，方便我们进行请求的时候使用
function getToken() {
//这里可以根据你项目具体来获取
const token = window.sessionStorage.getItem("token");token
return token || "";
}
//第二步我们创建一个axios实例对象,然后用函数Factory封装一下
function Factory({ baseURL, code, msg, callFail }) {
const $http = axios.create({
baseURL,
timeout: 1000 * 60 * 5, //超时时间
});
//请求拦截器,我们可以在请求拦截器中设置token,或者对请求进行一些处理
$http.interceptors.request.use(
(config) => {
//这里我们可以设置token
const token = getToken();
if (token) {
config.headers["AuthoriZation"] = token;
}
return {
headers: {
//这里我们还可以设置请求头
"Content-Type": "application/json;charset=UTF-8",
//......
},
...config,
validateStatus: (status) => {
//这里我们设置状态码的判断条件，如果返回的状态码在200到300之间就表示请求成功，否则就是失败
return (status >= 200 && status < 300) || status === 401;
},
};
},
(error) => {
//这里我们处理请求错误
return Promise.reject(error);
}
);
//响应拦截器,我们可以在响应拦截器中返回的数据或者错误信息进行处理
$http.interceptors.response.use((response) => {
//这里我们处理响应数据
const data = response.data;
if (+data.code === 200 || +data.code === 0) {
return data;
} else if (+data.code === 401) {
console.error("请求报错提示：token失效，请重新登录");
}else {
console.error("请求报错提示：", data,msg || "请求失败");
}
return Promise.reject(data.msg || "请求失败");
},
error => {
//这里我们处理响应错误
console.error("请求报错提示：", error,msg || "请求失败");
return Promise.reject(error);
});
return $http;
}
//第三步我们导出axios实例对象
export default Factory;
3、使用封装好的 axios
在项目标API文件模块中引入并使用封装好的 axios 实例：
import request from '@/utils/request';
// 示例请求
export function getUserInfo() {
return request({
url: '/user/info',
method: 'get'
});
}
4、在其他组件引入（Vue）
这里我拿vue来举个例子
文件目录
https://i-blog.csdnimg.cn/direct/55f774f399ff4e85a25a75c5d53a1ad8.png
<template>
<div>
<h1>用户信息</h1>
<p v-if="error">{{ error }}</p>
<div v-else>
<p>用户名: {{ userInfo.name }}</p>
<p>邮箱: {{ userInfo.email }}</p>
</div>
</div>
</template>
<script>
//引入我们的api
import { getUserInfo } from '@/api/user';
export default {
data() {
return {
userInfo: {},
error: ''
};
},
created() {
this.fetchUserInfo();
},
methods: {
//这里大家可以使用async await，也可以使用promise请求
async fetchUserInfo() {
try {
const response = await getUserInfo();
this.userInfo = response.data;
} catch (error) {
this.error = '无法获取用户信息';
console.error(error);
}
}
}
};
</script>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]