module6-02-Ajax 常用库
一、jQuery中的ajax方法
1.1 $.ajax()
-
参数是一个对象,其中常用的属性有
-
-
② type:可以为get、post等
-
③ dataType:表示传过来的数据,可以为json或者jsonp
-
④ data:用对象表示要传输过去的数据
-
⑤ beforeSend、success、error、complete等
-
最常用的一个是success
-
-
1.2 $.get()
-
就是针对get请求的一个简便的写法
-
传入四个参数
-
① url
-
② data
-
③ callback函数
-
④ dataType
-
1.3 $.post()
-
与$.get相似,这里不多讲了
1.4 jq重的其他方法ajaxSetup()
-
可以提前配置默认项, 传入一个对象, 如ajaxSetup({ url: '...', type: '...' })
-
这样的的话就可以不用每次请求重都加上这些数据, 从而把这些数据变成默认项
二、Axios
-
Axios是目前应用最为广泛的AJAX封装库
2.1 简介
-
支持node端和浏览器端口
-
支持Promise
-
丰富的配置项
-
社区支持: axios相关的npm包数量一直在增长
// ex:
axios.get('https://localhost:3000/post')
.then(function (response) {
console.log(response.data)
})
.catch(function (error) {
console.log(error)
})
2.2 axios的API
-
可以通过axios()传递相关配置来创建请求
-
axios(config) config为对象格式的配置选项
-
axios(url, config) config可选
常用配置项
值 | 描述 |
---|---|
url | 用于请求的服务器URL, 必需 |
methos | 创建请求时使用的方法 |
baseURL | 传递相对URL前缀, 自动添加在url前面 |
headers | 定义发送的请求头, 如Content-Type属性 |
params | 即将与请求一起发送的URL参数, 即get的参数, 可以些在url就后面 |
data | 作为请求主体被发送的数据 |
timeout | 请求超时的时间 |
responseTtpe | 表示服务器响应数据的数据类型, 默认json |
2.3 全局配置默认值
-
我们可以每次在axios请求的时候添加配置, 但是这样每次调用都会重复, 所有一个全局配置默认值的方法
axios.defaults
-
如axios.defaults.baseURL = 'http...'
2.4 axios方法的参数, 另外一种调用方法, axios(url, config)
-
添加方式
axios(url, {
params: {
id: 1
}
})
2.5 axios拦截器
-
在发送请求或者响应被then或catch处理前拦截它们
-
对发送进行拦截axios.interceptors.request
-
可以在发送请求之前, 定义好根据url的参数定义好header喝token之类的参数
-
-
对响应进行拦截axios,interceptors.response,可以在返回的时候返回config.data, 这样返回的数据久不回都.data
-
必须返回return一个值
2.6 axios的一些快速方法
-
axios.get / post / delete / put
-
参数要传两个, url和配置项
-
get和delete可以在url传参
-
或者在配置项中在params里面传参
-
-
post和put则传参在配置项
-
但是不需要在params里面
-
三、XHR 2.0
-
为H5新增
3.1 onload
-
只在请求完成时触发即readyState为4的时候触发
3.2 onprogress
-
只在请求进行中触发,在readyState为3的时候触发
-
有一个时间对象
-
接收到数据的个数 e.loaded
-
接受数据的总个数 e.total
-
3.3 response与responseType属性
-
一对象的形式表述响应体, 其类型取决于responseType的方法
-
设置了xhr.responseType之后就可以不用自己对responseText进行处理, 直接访问xhr.response