axios的封装（超详细简易版）

1、安装 axios

起首，通过 npm 安装 axios：
这里附上axios中文网：Axios中文文档 | Axios中文网

1. npm install axios

复制代码

2、创建 axios 实例

 在项目目录中新建一个 utils 文件夹，然后在内里创建一个 request.js 文件用于封装 axios。

1. //第一步我们先引入axios模块
2. import axios from "axios";
4. //这里的话有token的需求我们可以获取一下token，方便我们进行请求的时候使用
5. function getToken() {
6.     //这里可以根据你项目具体来获取
7.     const token = window.sessionStorage.getItem("token");token
8.     return token || "";
9. }
10. //第二步我们创建一个axios实例对象,然后用函数Factory封装一下
11. function Factory({ baseURL, code, msg, callFail }) {
12.     const $http = axios.create({
13.         baseURL,
14.         timeout: 1000 * 60 * 5, //超时时间
15.     });
16.     //请求拦截器,我们可以在请求拦截器中设置token,或者对请求进行一些处理
17.     $http.interceptors.request.use(
18.         (config) => {
19.             //这里我们可以设置token
20.             const token = getToken();
21.             if (token) {
22.                 config.headers["AuthoriZation"] = token;
23.             }
24.             return {
25.                 headers: {
26.                     //这里我们还可以设置请求头
27.                     "Content-Type": "application/json;charset=UTF-8",
28.                     //......
29.                 },
30.                 ...config,
31.                 validateStatus: (status) => {
32.                     //这里我们设置状态码的判断条件，如果返回的状态码在200到300之间就表示请求成功，否则就是失败
33.                     return (status >= 200 && status < 300) || status === 401;
34.                 },
35.             };
36.         },
37.         (error) => {
38.             //这里我们处理请求错误
39.             return Promise.reject(error);
40.         }
41.     );
42.     //响应拦截器,我们可以在响应拦截器中返回的数据或者错误信息进行处理
43.     $http.interceptors.response.use((response) => {
44.         //这里我们处理响应数据
45.         const data = response.data;
46.         if (+data.code === 200 || +data.code === 0) {
47.             return data;
48.         } else if (+data.code === 401) {
49.             console.error("请求报错提示：token失效，请重新登录");
50.         }else {
51.             console.error("请求报错提示：", data,msg || "请求失败");
52.         }
53.         return Promise.reject(data.msg || "请求失败");
54.     },
55.     error => {
56.         //这里我们处理响应错误
57.         console.error("请求报错提示：", error,msg || "请求失败");
58.         return Promise.reject(error);
59.     });
60.     return $http;
61. }
62. //第三步我们导出axios实例对象
63. export default Factory;

复制代码

3、使用封装好的 axios

 在项目标API文件模块中引入并使用封装好的 axios 实例：

1. import request from '@/utils/request';
3. // 示例请求
4. export function getUserInfo() {
5.   return request({
6.     url: '/user/info',
7.     method: 'get'
8.   });
9. }

复制代码

4、在其他组件引入（Vue）

这里我拿vue来举个例子
文件目录

1. <template>
2.   <div>
3.     <h1>用户信息</h1>
4.     <p v-if="error">{{ error }}</p>
5.     <div v-else>
6.       <p>用户名: {{ userInfo.name }}</p>
7.       <p>邮箱: {{ userInfo.email }}</p>
8.     </div>
9.   </div>
10. </template>
12. <script>
13. //引入我们的api
14. import { getUserInfo } from '@/api/user';
16. export default {
17.   data() {
18.     return {
19.       userInfo: {},
20.       error: ''
21.     };
22.   },
23.   created() {
24.     this.fetchUserInfo();
25.   },
26.   methods: {
27.     //这里大家可以使用async await，也可以使用promise请求
28.     async fetchUserInfo() {
29.       try {
30.         const response = await getUserInfo();
31.         this.userInfo = response.data;
32.       } catch (error) {
33.         this.error = '无法获取用户信息';
34.         console.error(error);
35.       }
36.     }
37.   }
38. };
39. </script>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。