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

1、安装 axios

首先，通过 npm 安装 axios：

这里附上axios中文网：Axios中文文档 | Axios中文网

npm install axios

2、创建 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>