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 简介

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

posted @ 2021-02-27 15:16  叻仔猪  阅读(69)  评论(0)  编辑  收藏  举报