1: axios: 发送网络情求, 对第三方框架进行封装。
在vue 中发送网络请求方式非常多
1: 第一种传统的ajax 请求基于XMLHttpRequest(XML);
基于传统的的ajax 请求配置调试非常混乱
2: 第二种jquery-ajax 请求;
相对于传统的ajax 请求非常好用。
3: 第三就是vue1.0的时候 官方推荐使用Vue-resource
Vue-resource 体积比jquery-ajax 体积小过很多。
4: 在 Vue2.0中推荐使用axios;
在前端开发中, 我们常见的我网络请求就是JSOPN
使用jsonp 的核心就是在于通<script> 标签的src 属性来帮助我们请求数据;
JSONP: 原理是什么?
(1): jsonp的核心在于通过<script> 标签的的src 属性来帮助我们请求数据
(2): 原因就是当我们的项目于部署到 xxx1.com 服务器上时, 是不能直接访问 xxx2.com 服务器上的资料的
(3): 这个时候我们需要使用<script> 标签的src 帮助我们去服务器请求到数据, 将数据当作一个
javascipt 函数来执行,并且在执行过程中传入我们需要的json 格式。
(4): 所以封装jsonp 的核心就是在于监听window 上的jsonp 进行回调时的名称。
为什么要推荐使用axios 使用:
功能特点: 1: 在浏览器中发送XMLHttpRequest 请求:
2: 在node.js 中发送http 请求
3: 支持promise API
4: 拦截请求和响应请求
5:转化请求和响应数据
对axios 理解:
axios ===> ajax i/o systme 输入/输出流
在vue 项目项目中进行安装axios 网络请求
首先在项目中安装aixos npm install axios --save
在main.js 中文件中引入: import axios form 'axios';
然后就可以配置axios
axios(config): config: 接受一个对象;
对象包含请求方式: 请求路径, 请求参数
axios 网络请求支持promise 的, .then可以获取到成功以后的数据
.catch 获取失败的以后的数据
jsonp: 方式就是执行的这个函数, 然后把结果在返回给回来。
请求方式报错, 可能会出现跨域的问题。
axios: 网路请求可以跟上请求方式: method: get 请求, post 请求, put 请求 delete 请求
post 请求: 需要传递参数 可以用data 接受参数。
如果同是需要拿到两个网络请求的数据, 可以使用promise.all 请求方式。
1: promise.all([this.getlist(), this.getData()]);
获取两个方法: 可以使用数据的形式。
2: 有时候我们需要同时发送两个请求: 使用promise.all 的方法, 可以放入多个请求的数组。
promise.all([]), 返回的是一个数组, 可以使用axios.spread 可以将数组 [res1, res2]
展开为res1, res2.
3: 在实际开发中, 我们有很多参数是固定的。
对axios 进行一个全局的配置,
axios.default.baseURL = "" 设置根请求路径
axios.default.header.post['Content-Type'] = 'application/x-www-form-urlencoded'
// 设置请求头
// 还可以设置请求超时时间 (timeout) 请求超时时间
axios.default.timeout = 5000; 设置请求的超时间
超时就是客户端请求服务器的时间过长。
请求地址: url, 请求类型: method 请求根路径,
请求前数据处理 transformRequest: ( function() {} )
请求后数据处理: transformResponse( funtion() {} )
4: 如果直接使axios库, 其实时是使用AxiosStatic
5: 创建axios 实例的场景
1: 后端接口可能部署到多个端,
服务器就是有一个分布式, 当服务器并发量比较高的时候, 就需要使用反向代理。
如果只有一个服务器, 假如说有过很多用户发送请求, 服务器处理不过来。
三个服务器的ip 地址是不相同的, 一般会使用反向代理服务器,
分布式架构微服务思想
2: 现在使用的场景, 首页请求一个IP地址, 列表页数据请求另外一个数据。
我们就需要创建axios 实例。 如果使用的全局axios 请求就不符合要求。
3: 创建对应的axios实例
const instance = axios.create({
// 设置请求根路径
// 设置超时时间
})
4:如果请求的地址是另外一个服务器: 就需要创建另外一个axios 实例。
每一个实例都有自己的独立的配置。 如果使用全局的网络请求就不太合适。
5: created() {}: 生命周期函数就是组件创建完成。
mounted() {}; data 数据源渲染到组件上,