09-网络模块封装.pptx

网络模块封装;常见的网络请求模块，以及优缺点对比。

JSONP的原理和封装

JSONP原理回顾

JSONP请求封装

axios的内容详解

认识axios网络模块

发送基本请求

axios创建实例

axios拦截器的使用

;Vue中发送网络请求有非常多的方式,那么,在开发中,如何选择呢?

;在前端开发中,我们一种常见的网络请求方式就是JSONP

使用JSONP最主要的原因往往是为了解决跨域访问的问题.

JSONP的原理是什么呢?

JSONP的核心在于通过script标签的src来帮助我们请求数据.

原因是我们的项目部署在服务器上时,是不能直接访问服务器上的资料的.

这个时候,我们利用script标签的src帮助我们去服务器请求到数据,将数据当做一个javascript的函数来执行,并且执行的过程中传入我们需要的json.

所以,封装jsonp的核心就在于我们监听window上的jsonp进行回调时的名称.

JSONP如何封装呢?

我们一起自己来封装一个处理JSONP的代码吧.

;JSONP封装;为什么选择axios?作者推荐和功能特点

功能特点:

在浏览器中发送XMLHttpRequests请求

在node.js中发送http请求

支持PromiseAPI

拦截请求和响应

转换请求和响应数据

等等

;支持多种请求方式:

axios(config)

axios.request(config)

axios.get(url[,config])

axios.delete(url[,config])

axios.head(url[,config])

axios.post(url[,data[,config]])

axios.put(url[,data[,config]])

axios.patch(url[,data[,config]])

如何发送请求呢?

我们看一下左边的案例

;发送get请求演示;有时候,我们可能需求同时发送两个请求

使用axios.all,可以放入多个请求的数组.

axios.all([])返回的结果是一个数组，使用axios.spread可将数组[res1,res2]展开为res1,res2;在上面的示例中,我们的BaseURL是固定的

事实上,在开发中可能很多参数都是固定的.

这个时候我们可以进行一些抽取,也可以利用axiox的全局配置;请求地址

url:/user,

请求类型

method:get,

请根路径

baseURL:/api,

请求前的数据处理

transformRequest:[function(data){}],

请求后的数据处理

transformResponse:[function(data){}],

自定义的请求头

headers:{x-Requested-With:XMLHttpRequest},

URL查询对象

params:{id:12},;为什么要创建axios的实例呢?

当我们从axios模块中导入对象时,使用的实例是默认的实例.

当给该实例设置一些默认配置时,这些配置就被固定下来了.

但是后续开发中,某些配置可能会不太一样.

比如某些请求需要使用特定的baseURL或者timeout或者content-Type等.

这个时候,我们就可以创建新的实例,并且传入属于该实例的配置信息.

;axios封装;axios提供了拦截器，用于我们在发送每次请求或者得到相应后，进行对应的处理。

如何使用拦截器呢？

;请求拦截可以做到的事情：

请求拦截中错误拦截较少，通常都是配置相关的拦截

可能的错误比如请求超时，可以将页面跳转到一个错误页面中。

;响应拦截中完成的事情：

响应的成功拦截中，主要是对数据进行过滤。

响应的失败拦截中，可以根据status判断报错的错误码，跳转到不同的错误提示页面。

;演示完毕！