axios实例与模块封装
1. 为什么要进行实例化和模块封装
1. 前面的axios使用是在相应的模块中通过import引入axios模块,然后调用axios方法,这样会导致许多模块中都会依赖于axios模块
2. 这样是存在很大安全隐患的,如果某一天axiso不再维护,挥着想要更换别的网络请求框架.需要逐个修改依赖于axios框架的组件,实属灾难
2. axios实例化
当我们有很多网络请求时,比如有20个网络请求,每五个可以分为一组,因为他们大部分请求信息很相似,可以设置默认配置,
而使用前面的axios.default的方法行不通,因为这是全局配置的,因此我们引入axios实例化
方法:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
// 将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实例
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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. 在某个组件中调用该模块来发送请求
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
import * as request from "./network/request"; // 发送请求 request.instance1({ url: '/home/multidata' },res => { console.log(res) }, err => { console.log(err); })
3. 在上述两步中,也可以将2中的发送请求的数据修改为一个对象,此时1中封装的模块也需要做相应修改
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
// 创建网络请求模块 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对象,因此上述嗲马还可作简化
创建网络请求模块
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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); }
在组件中发送请求
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
import * as request from "./network/request"; const req = { url: '/home/multidata' } // 直接在then和catch中处理返回结果即可 request.instance1(req).then(res => { console.log(res); }).catch(...)