module6-02-Ajax 常用库

Ajax 常用库

一、jQuery中的ajax方法

1.1 $.ajax()

• 参数是一个对象，其中常用的属性有

  • ① url

  • ② 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包数量一直在增长

• 引包网址：https://unpkg.com/axios/dist/axios.min.js

// 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即得到想要的返回体