vue axios基于常见业务场景的二次封装的实现

为了更好地在Vue项目中使用axios库，我们可以通过二次封装的方式对axios进行自定义处理，使其更加符合我们项目的实际需求。下面是基于常见业务场景的二次封装步骤及示例说明：

一、安装axios和qs

在使用axios之前，我们需要安装axios和qs两个依赖。axios是一种基于Promise的HTTP客户端，可以用于浏览器和node.js。而qs是一个处理URL查询字符串的JavaScript库。

npm install axios qs -S

二、创建Http封装

我们可以创建一个叫Http.js的文件来封装我们的http请求，该文件应该导出一个已经包装过的axios实例。

import axios from 'axios';
import qs from 'qs';

const instance = axios.create({
    timeout: 10000,
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
    }
});

instance.interceptors.request.use(
    config => {
        // 在请求发送前做一些处理
        config.method === 'post'
            ? config.data = qs.stringify({...config.data})
            : config.params = {...config.params};
        return config;
    },
    error => {
        // 请求错误时做一些处理
        return Promise.reject(error);
    }
);

instance.interceptors.response.use(
    response => {
        // 对响应数据做一些处理
        return response.data;
    },
    error => {
        // 统一错误处理
        if (error && error.response) {
            switch (error.response.status) {
                case 400:
                    error.message = '请求错误';
                    break;
                case 401:
                    error.message = '未授权，请登录';
                    break;
                case 403:
                    error.message = '拒绝访问';
                    break;
                case 404:
                    error.message = `请求地址出错: ${error.response.config.url}`;
                    break;
                case 408:
                    error.message = '请求超时';
                    break;
                case 500:
                    error.message = '服务器内部错误';
                    break;
                case 501:
                    error.message = '服务未实现';
                    break;
                case 502:
                    error.message = '网关错误';
                    break;
                case 503:
                    error.message = '服务不可用';
                    break;
                case 504:
                    error.message = '网关超时';
                    break;
                case 505:
                    error.message = 'HTTP版本不受支持';
                    break;
                default:
            }
            error.message = `${error.message}，错误码：(${error.response.status})`;
        } else {
            error.message = `连接出错(${error.response.status})！`;
        }
        return Promise.reject(error);
    }
);

export default instance;

三、创建封装工具

我们可以创建一个叫api.js的文件，里面定义了所有的请求方法。每个请求返回一个promise，因此可以使用.then().catch()方法处理响应。

下面是一个获取用户信息的示例：

import http from './http';

// 获取用户信息
export const getUserInfo = (id) => {
  return http.get(`/users/${id}`);
}

我们可以调用这个方法的方式：

import * as api from './api';

api.getUserInfo(123).then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
})

四、示例解释

这是一个以获取用户信息为例的二次封装及使用，我们需要首先引入封装好的http请求：

import http from './http';

然后，我们在api.js文件中定义函数getUserInfo，该函数将用户id作为参数传入，并返回一个使用GET请求的promise对象：

export const getUserInfo = (id) => {
  return http.get(`/users/${id}`);
}

此时，我们就可以在页面中进行数据的请求了：

import * as api from './api';

// 获取用户信息
api.getUserInfo(123).then(res => {
    // 做一些处理
}).catch(err => {
    console.log(err);
})

除了这个获取用户信息的示例，我们也可以依据项目需求封装其它请求方法，如后台管理系统的增删改查操作等。