Vue简单封装axios网络请求的方法

下面是“Vue简单封装axios网络请求的方法”的完整攻略。

1. 确认项目中axios库的使用

在使用Vue封装axios网络请求之前，需要先确认项目中是否已经引入axios库。如果没有引入，则需要在项目中安装axios:

npm install axios --save

如果已经引入了axios库，则可以直接开始Vue封装axios网络请求的操作。

2. 创建工具类axios.js

在src目录下新建一个utils文件夹，并在其中新建一个axios.js文件，代码如下：

import axios from 'axios';

let instance = axios.create({
    baseURL: [URL],
    timeout: [TIMEOUT]
});

instance.interceptors.request.use(config => {
    [请求拦截处理]
    return config;
}, error => {
    return Promise.reject(error);
});

instance.interceptors.response.use(response => {
    [响应拦截处理]
    return response;
}, error => {
    return Promise.reject(error);
});

export default instance;

其中，[URL]为请求的基础URL，[TIMEOUT]为请求超时时间，[请求拦截处理]和[响应拦截处理]为请求前、响应后的处理操作。

3. 在组件中使用axios请求接口

在Vue组件中使用axios请求接口，引入工具类axios.js，并在Vue组件的方法中调用：

import axios from '../utils/axios';

export default {
    data() {
        return {
            [DATA]
        };
    },
    methods: {
        async [FUNCTION]() {
            try {
                let response = await axios.get("/[API_ENDPOINT]");
                if (response.status === 200) {
                    this.[DATA] = response.data;
                }
            } catch (error) {
                [错误处理]
            }
        }
    }
};

其中，[API_ENDPOINT]为API接口路径，[DATA]为请求返回数据，[FUNCTION]为请求方法名称，[错误处理]为请求错误的处理操作。

示例说明

示例1: GET请求

async getExample() {
    try {
        let response = await axios.get("/api/example");
        if (response.status === 200) {
            this.data = response.data;
        }
    } catch (error) {
        console.log(error);
    }
}

示例2: POST请求

async postExample() {
    try {
        let response = await axios.post("/api/example", {
            data: this.data
        });
        if (response.status === 200) {
            console.log(response.data);
        }
    } catch (error) {
        console.log(error);
    }
}

以上就是关于“Vue简单封装axios网络请求的方法”的完整攻略和两条示例说明，希望对您有所帮助。