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

大家好，欢迎来到IT知识分享网。

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来举个例子

文件目录

<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>