axios实例与模块封装

1. 为什么要进行实例化和模块封装

　　1. 前面的axios使用是在相应的模块中通过import引入axios模块,然后调用axios方法,这样会导致许多模块中都会依赖于axios模块

　　2. 这样是存在很大安全隐患的,如果某一天axiso不再维护,挥着想要更换别的网络请求框架.需要逐个修改依赖于axios框架的组件,实属灾难

 

2. axios实例化

　　当我们有很多网络请求时,比如有20个网络请求,每五个可以分为一组,因为他们大部分请求信息很相似,可以设置默认配置,

　　而使用前面的axios.default的方法行不通,因为这是全局配置的,因此我们引入axios实例化

　　方法:

                            // 将axios实例化
                                const req1 = axios.creat({
                                    baseURL: http://123.207.32.32:8000
                                    timeout: 1000,
                                })
                                const req2 = axios.creat({
                                    baseURL: http://154.204.22.37:8080
                                    timeout: 3000,
                                })
                                ......
                            // 使用实例化的axios
                                req1({
                                    url: '/home/multidata',
                                }).then(res +> {
                                    console.log(res);
                                })
                                req2(),
                                ......

 

3. 模块封装

　　　　为了解决多个组件对axios模块依赖性的问题

　　1. 新建一个network文件夹,并在内部创建多个导出axios实例

                            import axios from "axios";
                            export function instance1(config, success, failure){
                                // 1. 创建axios实例
                                const instance = axios.create({
                                    baseURL: 'http://123.207.32.32:8000',
                                    timeout: 5000,
                                });

                                // 2. 发送真正的网络请求
                                instance(config).then(res => {
                                    // 请求成功后调用success
                                    success(res);
                                }).catch(err => {
                                    // 请求失败后调用failure
                                    failure(err);
                                })

                                // 2. 继续创建多个axios实例
                                ......
                            }

　　2. 在某个组件中调用该模块来发送请求

                           import * as request from "./network/request";
                            // 发送请求
                            request.instance1({
                                url: '/home/multidata'
                            },res => {
                                console.log(res)
                            }, err => {
                                console.log(err);
                            })            

　　3. 在上述两步中,也可以将2中的发送请求的数据修改为一个对象,此时1中封装的模块也需要做相应修改

                            // 创建网络请求模块
                                import axios from "axios";
                                export function instance1(config){
                                    // 1. 创建axios实例
                                    const instance = axios.create({
                                        baseURL: 'http://123.207.32.32:8000',
                                        timeout: 5000,
                                    });

                                    // 2. 发送真正的网络请求
                                    instance(config.baseConfig).then(res => {
                                        // 请求成功后调用success
                                        config.success(res);
                                    }).catch(err => {
                                        // 请求失败后调用failure
                                        config.failure(err);
                                    })
                            // 发送请求
                                创建数据对象
                                const req = {
                                    baseConfig:{
                                        url: '/home/multidata',
                                    },
                                    success:(res) => {
                                        console.log(res);
                                    },
                                    failure: (err) => {
                                        console.log(err);
                                    }
                                }
                                发送网络请求
                                request.instance1(req)  

　　4. 由于axios.create()本身返回的就是一个Promise对象,因此上述嗲马还可作简化

                            创建网络请求模块

                                import axios from "axios";
                                export function instance1(config){
                                    // 1. 创建axios实例
                                    const instance = axios.create({
                                        baseURL: 'http://123.207.32.32:8000',
                                        timeout: 5000,
                                    });


                                    // 2. 发送真正的网络请求
                                    // 这里返回值就是一个Promise对象
                                    return instance(config);
                                }

                            在组件中发送请求

                                import * as request from "./network/request";
                                const req = {
                                    url: '/home/multidata'
                                }
                                // 直接在then和catch中处理返回结果即可
                                request.instance1(req).then(res => {
                                    console.log(res);
                                }).catch(...)