Axios学习(5)---axios请求的封装与使用

秒速五厘米 2021-08-02 16:29 572阅读 0赞

### 文章目录 ###

*   *   *  Axios学习(5)---axios请求的封装与使用
         *   *  思路分析
             *  第一步：新建 \*src/service/contactApi.js\* 文件
             *  第二步：新建 \*src/service/http.js\* 文件
             *  第三步：在入口文件中导入 \*http.js\* ，并挂载到 \*vue\* 原型上。
             *  第四步：在组件中使用封装的请求
             *  总结
             *  温馨提示

### Axios学习(5)—axios请求的封装与使用 ###

#### 思路分析 ####

*axios* 请求的封装，无非是为了方便代码管理，我们可以使用抽离拆分的思想，将不同功能模块的接口处理成不同的模块，然后封装一个方法，专门用于数据交互。

#### 第一步：新建 *src/service/contactApi.js* 文件 ####

const CONTACT_API = { 
        // 获取联系人列表
        getContactList:{ 
            method:'get',
            url:'/contactList'
        },
        // 新建联系人 form-data
        newContactForm:{ 
            method:'post',
            url:'/contact/new/form'
        },
        // 新建联系人 application/json
        newContactJson:{ 
            method:'post',
            url:'/contact/new/json'
        },
        // 编辑联系人
        editContact:{ 
            method:'put',
            url:'/contact/edit'
        },
        // 删除联系人
        delContact:{ 
            method:'delete',
            url:'/contact'
        }
    }
    export default CONTACT_API

备注：该文件的用途只有一个，定义不同的接口请求信息（包含 ***method***、\*\*\*url\*\*\*等）并导出使用。当接口增加或者删除的时候，只需要定义在该文件中即可。

--------------------

#### 第二步：新建 *src/service/http.js* 文件 ####

import axios from 'axios'
    import service from './contactApi'
    import {  Toast } from 'vant'
    // service 循环遍历输出不同的请求方法
    let instance = axios.create({ 
        baseURL: 'http://localhost:9000/api',
        timeout: 1000
    })
    const Http = { }; // 包裹请求方法的容器
    
    // 请求格式/参数的统一
    for (let key in service) { 
        let api = service[key]; // url method
        // async 作用：避免进入回调地狱
        Http[key] = async function(
            params, // 请求参数 get：url，put，post，patch（data），delete：url
            isFormData = false, // 标识是否是form-data请求
            config = { } // 配置参数
        ) { 
            let newParams = { }
    
            // content-type是否是form-data的判断
            if (params && isFormData) { 
                newParams = new FormData()
                for (let i in params) { 
                    newParams.append(i, params[i])
                }
            } else { 
                newParams = params
            }
            // 不同请求的判断
            let response = { }; // 请求的返回值
            if (api.method === 'put' || api.method === 'post' || api.method === 'patch') { 
                try { 
                    response = await instance[api.method](api.url, newParams, config)
                } catch (err) { 
                    response = err
                }
            } else if (api.method === 'delete' || api.method === 'get') { 
                config.params = newParams
                try { 
                    response = await instance[api.method](api.url, config)
                } catch (err) { 
                    response = err
                }
            }
            return response; // 返回响应值
        }
    }
    
    // 拦截器的添加
    // 请求拦截器
    instance.interceptors.request.use(config => { 
            // 发起请求前做些什么
            Toast.loading({ 
                mask: false,
                duration: 0, // 一直存在
                forbidClick: true, // 禁止点击
                message: '加载中...'
            })
            return config
        }, () => { 
            // 请求错误
            Toast.clear()
            Toast('请求错误，请求稍后重试')
        })
        // 响应拦截器
    instance.interceptors.response.use(res => { 
        // 请求成功
        Toast.clear()
        return res.data
    }, () => { 
        Toast.clear()
        Toast('请求错误，请求稍后重试')
    })
    
    export default Http

具体的思路步骤如下：

1.  首先，我们引入*contactApi.js*文件，别名定义为 *service*。
    
        import service from './contactApi'
2.  定义新的 *axios* 实例，针对当前功能模块联系人列表管理 *contactList* ，配置*baseURL*基础域名、*timeout*请求超时时间等等，区别于其他功能模块。
    
        let instance = axios.create({ 
            baseURL: 'http://localhost:9000/api',
            timeout: 1000
        })
3.  定义 *http* 作为请求方法的容器，配置对应的参数(即请求方法中的其他信息，比如 *headers*，*content-type*，*token*等等)。需要注意的是，在其中我们要区分 *content-type*的形式有两种：*form-data* 与 *application/json*，它们的参数配置不同，*form-data* 形式的参数，我们需要定义 *Formdata* 对象。具体如下：
    
        let newParams = { }
        // content-type是否是form-data的判断
        if (params && isFormData) { 
            newParams = new FormData()
            for (let i in params) { 
                newParams.append(i, params[i])
            }
        } else { 
            newParams = params
        }
    
    温馨提示：其中 *isFormData* 定义为 *Boolean* 变量，用于标识是否为 *FormData* 形式。
4.  根据不同的请求方式，发起网络请求，并导出返回值。
    
        // 不同请求的判断
        let response = { }; // 请求的返回值
        if (api.method === 'put' || api.method === 'post' || api.method === 'patch') { 
            try { 
                response = await instance[api.method](api.url, newParams, config)
            } catch (err) { 
                response = err
            }
        } else if (api.method === 'delete' || api.method === 'get') { 
            config.params = newParams
            try { 
                response = await instance[api.method](api.url, config)
            } catch (err) { 
                response = err
            }
        }
        return response; // 返回响应值
    
    注意：对于不同方法的区别在于：*get* 与 *delete* 的参数在 *config* 中配置，而不是使用 *params* 。
5.  设置请求拦截器与响应拦截器
    
        // 拦截器的添加
        // 请求拦截器
        instance.interceptors.request.use(config => { 
                // 发起请求前做些什么
                Toast.loading({ 
                    mask: false,
                    duration: 0, // 一直存在
                    forbidClick: true, // 禁止点击
                    message: '加载中...'
                })
                return config
            }, () => { 
                // 请求错误
                Toast.clear()
                Toast('请求错误，请求稍后重试')
            })
            // 响应拦截器
        instance.interceptors.response.use(res => { 
            // 请求成功
            Toast.clear()
            return res.data
        }, () => { 
            Toast.clear()
            Toast('请求错误，请求稍后重试')
        })
6.  导出*src/service/http.js*文件，用于其他地方的引入。
    
        export default Http

--------------------

#### 第三步：在入口文件中导入 *http.js* ，并挂载到 *vue* 原型上。 ####

import Http from './service/http'
    // 把Http挂载到Vue实例上
    Vue.prototype.$Http = Http

--------------------

#### 第四步：在组件中使用封装的请求 ####

// 获取联系人列表
    async getList(){ 
        let res = await this.$Http.getContactList()
        this.list = res.data
    },

注意：在使用的时候，我们需要结合 *async* 与 *await* 才能正确使用。具体的使用方法是：

1.  在定义的网络请求函数前增加 *async* 标识。
2.  在接收请求返回数据的时候，增加 *await* 标识。
3.  提示：在上面函数中，只有在 *res* 拿到后才会执行 *this.list = res.data;* 相当于在对应的 *then* 中执行的语句，避免了回调地狱。

--------------------

#### 总结 ####

在进行项目开发的时候，我们需要对网络请求的方法进行封装，可以有效地减少后期代码维护的难度，建议开发者根据不同的功能模块进行拆分，方便后期代码问题的定位。另外，也能实现代码的低耦合，避免出现更多的重复代码。

--------------------