axios基本封装-基于vue

最新推荐文章于 2024-05-18 15:09:49 发布

garyHoH

最新推荐文章于 2024-05-18 15:09:49 发布

阅读量503

点赞数

分类专栏： vue javaScript 移动端文章标签： axios vue html js

本文链接：https://blog.youkuaiyun.com/qq940853667/article/details/97131232

版权

vue 同时被 3 个专栏收录

13 篇文章

订阅专栏

javaScript

13 篇文章

订阅专栏

移动端

3 篇文章

订阅专栏

本文介绍了如何在Vue项目中进行axios的基本封装，通过创建axios实例并设置拦截器，详细讲解了在http.js和model.js中的实现过程，并提供了view.vue文件的调用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装、引用

npm install axios --save // 安装到生产环境
import Axios from 'axios'

本次封装运用class类进行封装
当new class类时, 默认执行class类中constructor()方法；

class Http {
	constructor() {
		// new Http() 默认执行该方法
	}
}

export default async options => {
	let result = await new Http(options);
	if (result) {
	return result.data;
}

axios

创建axios的实例

this.httpInstance = Axios.create({
	baseURL: ‘www.baidush.com/’,  // 设置基本url地址; 之后再传入 url:'/details'就行, 会自动拼接
	timeout: 30000, // 设置超时时间
	header: { // 设置请求头,
		'content-type': 'application/x-www-form-urlencoded',
		'自己填': '随便填, 一个对象'
	},  
});

设置拦截器

this.httpInstance 就是axios的实例
在创建完实例时候可以设置拦截器

// 请求拦截
this.httpInstance.interceptors.request.use( config => {
    return config;
}, error => {
    this.errorHandle(error); // 自定义的公共处理错误方法
})

// 响应拦截
this.httpInstance.interceptors.response.use(response => {
    if (response.data.code === '0') {
        return response.data;
    }
    else {
        this.errorHandle(response.data); // 自定义的公共处理错误方法
    }
}, error => {
    console.log('响应拦截进入了错误');
    this.errorHandle(error); // 自定义的公共处理错误方法
})

完整示例

1.http.js

import Axios from 'axios'
import Sha256 from 'js-sha256'
import Config from '@common/app.config.js'


class Http {
    // 类的默认执行方法
    constructor(options) {
        this.options = options;
        this.init(this.options);
        return this.httpInstance(this.options);
    };

    init(options) {
        // 是否拦截, 默认拦截
        this.intercept = typeof options.intercept === 'undefined' || options.intercept;

        // 创建axios实例
        this.httpInstance = Axios.create({
            baseURL: Config.host,   // 注意点, 这只是基本url，在model文件中会传入 url ，
            timeout: 30000,
        });

        this.setHeaders();
        this.setInterceptors();
    };

    // 设置拦截器
    setInterceptors() {
        if (!this.intercept) return;

        // 请求拦截
        this.httpInstance.interceptors.request.use( config => {
            return config;
        }, error => {
            this.errorHandle(error);
        })

        // 响应拦截
        this.httpInstance.interceptors.response.use(response => {
            if (response.data.code === '0') {
                return response.data;
            }
            else {
                this.errorHandle(response.data);
            }
        }, error => {
            console.log('响应拦截进入了错误');
            this.errorHandle(error);
        })

    };

    // 设置请求头
    setHeaders() {
    };

    // 错误处理
    errorHandle(error) {
    }
}

export default async options => {
    if (options.method !== 'post') {
        options.params = options.data
    }
    let result = await new Http(options);
    if (result) {
        return result.data;
    }
}

2.model.js

import Http from '@common/app.http.js';

export default {
    getData: data => Http({
        url: '/5b9b127b61b19178b821ec8d/app/inventory/material/list',
        method: 'post',  // 默认get请求
        data
    }),

    getDetails: data => Http({
        url: '/5b9b127b61b19178b821ec8d/app/inventory/details',
        data
    })
}

3. 调用 view.vue 文件

<style lang="stylus" src="./view.styl"></style>
<template lang="html" src="./view.html"></template>
<script>
    import Model from '@models/model.public.js';
    export default {
        name: 'pAxiosPage',
        data() {
            return {
            }
        },
        methods: {
            init() {
                this.getData();
                this.getDetails();
            },

            async getData() {
                let result = await Model.getData({
                    pageSize: 1
                });
                if (result) {
                    console.log(result);
                }
            },

            async getDetails() {
                let result = await Model.getDetails({
                    pageSize: 1
                });
                if (result) {
                    console.log(result);
                }
            }
        },
        mounted() {
            this.init();
        }
    }
</script>