网络模块封装-axios

网络请求模块的选择

—传统的Ajax是基于XML Http Request(XHR)，缺点：配置和调用方式等非常混乱；真实开发中很少直接使用，而是使用jQuery-Ajax；

—Vue开发中不需要使用jQuery，完全没必要为了网络请求而引用这个重量级的框架；

—Vue1.x版本中，官方推出了Vue-resource，相对于jQuery体积要小，但是不支持Vue新版本，也不会继续更新和维护，对以后的项目开发和维护存在很大的隐患；

—axios有很多优点，在浏览器中发送XHR请求；在node.js中发送http请求；支持Promise API；拦截请求和响应；转换请求和响应数据；

—JSONP的核心在于通过<script>标签的src来帮助我们请求数据；原因是我们的项目部署在domain1.com服务器上时，是不能直接访问domain2.com服务器上的资料；我们可以利用<script>标签的src帮助我们服务器请求到数据，将数据当作一个javascript的函数来执行，并且执行过程传入我们需要的json；封装jsonp的核心就在于我们监听window上的jsonp进行回调时的名称；

axios基本框架

—安装axios框架：npm install axios --save；

—简单使用：

import axios from 'axios'
axios({url:'http://123.207.32.32:8000/home/multidata',//专门对get请求的参数拼接params:{type:'pop',page:1}
}).then(res => {console.log(res)
})

axios发送并请求

—可以通过axios.all方法进行多个请求的发送：

—其返回的结果是一个数组，使用axios.spread可以将数组[res1,res2]展开为res1,res2；
axios.all([axios(url:'http://123.207.32.32:8000/home/multidata'),axios(url:'http://123.207.32.32:8000/home/data',params:{type:'sell',page:4})]).then(axios.spread((res1,res2) => {console.log(res1)console.log(res2)
})

axios的配置

—通常在上面的示例中,BaseURL都是固定的，实际上在开发中可能很多参数是固定的，我们可以进行抽取，也可以利用axios的全局配置；

—配置如下：axios.defaults.baseURL = 'http://123.207.32.32:8000'；

—常见的配置选项：具体可以查看官网；
axios的实例和模块封装
—服务器分布式？代理服务器？需要了解！

—在后续的开发中，某些配置可能会不太一样，比如某些请求需要特定的baseURL，这时候可以创建新的实例，并且传入该实例的配置信息，通过axios.create()创建axios对应实例：
```
//创建实例
const instance1 = axios.create({baseURL:'http://222.111.33.33:8000',timeout:5000
})
//使用实例
instance1({url:'/home/multidata'
}).then(res => {console.log(res)
})
```
—在使用第三方时尽量做好封装；比如网络请求可以新建一个文件夹network进行网络封装，可以通过回调函数方式和Promise方式：
```
const instance = axios({baseURL:'http://222.111.33.33:8000',timeout:5000
})
//发送真正的网络请求instance(config).then(res => {resolve(res)
}).catch(err => {reject(err)
})
//这里instance()本身返回的就是AxiosPromise对象
//因此可以直接返回
return instance(config)
```
axios拦截器的使用
—axios提供了拦截器axios.interceptors，用于我们在每次发送请求时或者得到响应后，进行对应的处理；

—拦截需求：config中一些信息不符合服务器的要求；每次发送网络请求时，都希望在界面中显示一个请求的图标；某些网络请求（比如登录），必须携带一些特殊的信息；

—实例拦截器例如：
```
//拦截请求
instance.interceptors.request.use(config => {//将数据拦截掉，如果想要得到数据，需要将拦截的结果返回return config
},err => {console.log(err)
});
//拦截响应
instance.interceptors.response.use(res => {console.log(res)return
},err => {console.log(err)
});
```

网络模块封装-axio相关推荐

android封装网络请求界面,轻松搞定 android MVP 架构、okHttp 网络模块封装的项目...
CommonMvp commonMvp 能做什么? 1.mvp 实现 model view presenter 业务和界面解耦 2.整合网络请求 3.简化网络调用流程 4.整合状态栏和标题栏实现 ...
仅需6步，教你轻易撕掉app开发框架的神秘面纱（6）：各种公共方法及工具类的封装
为什么要封装公共方法封装公共方法有2方面的原因: 一是功能方面的原因:有些方法很多地方都会用,而且它输入输出明确,并且跟业务逻辑无关.比如检查用户是否登录,检查某串数字是否为合法的手机号.像这种方法 ...
60分钟入门深度学习工具PyTorch
「免费学习 60+ 节公开课:投票页面,点击讲师头像」作者 | Soumith Chintala 中文翻译.注释制作 | 黄海广配置环境:PyTorch 1.3,python 3.7, 主机:显卡 ...
可下载：60分钟入门PyTorch（中文翻译全集）
来源:机器学习初学者本文约9500字,建议阅读20分钟官网教程翻译:60分钟入门PyTorch(全集) 前言原文翻译自:Deep Learning with PyTorch: A 60 Minute ...
【深度学习】翻译：60分钟入门PyTorch（三）——神经网络
前言原文翻译自:Deep Learning with PyTorch: A 60 Minute Blitz 翻译:林不清(https://www.zhihu.com/people/lu-guo-92 ...
（翻译）60分钟入门深度学习工具-PyTorch
60分钟入门深度学习工具-PyTorch 作者:Soumith Chintala 原文翻译自: https://pytorch.org/tutorials/beginner/deep_learning ...
最新翻译的官方PyTorch简易入门教程（PyTorch1.0版本)
"PyTorch 深度学习:60分钟快速入门"为PyTorch官网教程,网上已经有部分翻译作品,随着PyTorch1.0版本的公布,这个教程有较大的代码改动,本人对教程进行重新翻译 ...
axios发送网络请求
网络模块封装选择什么网络模块传统的Ajax 缺点:配置和调用方式等非常混乱 jQuery-Ajax 缺点:在Vue整个开发中都是不需要使用jQuery的 axios axios 功能特点: 在浏览 ...
Qt 软件开发框架（详细版）
该文章用图例+代码方式演示了,一个线上软件基本框架(精简).开发工具Qt+VS2015 一. 基本要素这里会用简单的图例和完整代码(这里以Qt代码为例),说明一个线上软件基本的框架. 一个线上win ...
pytorch里面nn.Module讲解
nn.Module是在pytorch使用非常广泛的类,搭建网络基本都需要用到这个. 当我们搭建自己的网络时,可以继承官方写好的nn.Module模块,为什么要用这个呢?好处如下: nn.Module作 ...

网络模块封装-axio

网络模块封装-axios

网络模块封装-axio相关推荐

最新文章

热门文章