VUE3 项目开发实战入门系列 （6.-封装Axios）

封装Axios

​ 异步请求的库选择性很多，比如原生的fetch、第三方库request、axios等等，当然对于从Vue2过渡过来的同学而言，首选肯定是axios了，所以本项目也基于axios来封装异步请求模块。

安装axios和lodash工具库

npm install axios lodash

lodash 并非axios依赖库，只是在待会封装时候需要使用库里面的一些方法。

​ 新建工具类文件夹src/utils，添加一个分异步请求模块文件src/utils/httpRequest.js

import axios from "axios"
import _ from "lodash"

export default class HttpRequest {

    // 错误处理函数的集合, #号开头为私有属性
    #responseHandles = [];

    /**
     * 构造函数
     * @param {Object} options
     */
    constructor(options = {}) {
        this.request = axios.create(options);
        this.setupInterceptors();
    }

    /**
     * 外部添加响应错误处理的方法
     * @param {Function} callback 
     */
    useErrorHandles(callback) {
        if( typeof callback === "function" ) {
            this.#responseHandles.push(callback)
        }
    }

    // 请求错误处理
    reqErrorHandle() {
        return error => {
            return Promise.reject(error);
        }
    }

    // 响应的错误处理
    resErrorHandle() {
        return error => {
            this.#responseHandles.forEach(handle => {
                handle(error);
            });
        }
    }

    // 设置拦截器
    setupInterceptors() {
        this.request.interceptors.request.use(config => {
            // 通常情况会在这里添加公共请求头，比如Token
            // config.headers["Authorization"] = ACCESS_TOKEN
            return config;
        }, this.reqErrorHandle())

        // 响应拦截器
        this.request.interceptors.response.use((response) => {
            return response;
        }, this.resErrorHandle());
    }

    // 创建返回基于axios的请求方法
    createRequest() {
        return config => {
            const copyConfig = _.cloneDeep(config);

            return new Promise((resolve, reject) => {
                this.request(copyConfig).then(res => {
                    resolve(res);
                }).catch(err => {
                    reject(err);
                })
            })
        } 
    }
}

​ 一个简单的异步请求库就封装好了，当然功能还不是很完善，比如缺少了详细的错误处理，请求状态管理等等 ，不过尽管如此，由于axios本身的功能就已经很完善，所以当前版本已经能满足大部分的使用场景了。

接下来我们把httpRequest库集成到app中， 新建文件夹src/setup，添加文件src/setup/index.js

import HttpRequest from "@/utils/httpRequest"

function setupRequest(app) {
    const httpRequest = new HttpRequest({
        // 你的axios基准路径
        baseURL: "http://127.0.0.1:5000"
    });
    
    // 自定义异步请求错误处理
    // httpRequest.useErrorHandles(error => {
    //     console.log(error.response)
    // })

    // 绑定$request属性到Vue原型，类似Vue.prototype。
    app.config.globalProperties.$request = httpRequest.createRequest();
}

const setup = {
    install(app) {
        setupRequest(app);
    }
}

export default setup;

setup是为app设计的预设插件，不局限于只设置异步请求工具，下面把setup导入到src/main.js

import { createApp } from 'vue'
import App from './App.vue'

// 导入路由对象
import router from "@/router/index"

// 完整导入Antd组件库
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

// 导入setup
import setup from "@/setup/index"

// 创建app
export const app = createApp(App);
app.use(router);
app.use(Antd);
app.use(setup)
app.mount("#app");

测试接口请求，src/views/index.vue

<template>
    <div>
	<h2>首页 - by ctcode</h2>
	<!-- 加载中状态组件 -->
	<a-spin/>
    </div>
</template>

<script>
export default {
created () {
	this.$request({
		url: "https://api.github.com/users"
	}).then(res => {
		console.log(res);
	}).catch(err => {
		console.log(err);
	})
}
}
</script>

api.github.com/users是githu…

查看代码：

git clone https://github.com/chitucode/ctcode-vue3.git (已下载可直接checkout)
git checkout v6.0 

好友微信号

添加大佬微信 和上千同伴一起提升技术交流生活

hsian_

最后

码字不容易 你的点击关注点赞留言就是我最好的驱动力