Ajax(二) - Ajax常用库

355 阅读4分钟

请求

www.w3school.com.cn/jquery/jque…

$.ajax()

常用选项参数介绍:

• url:请求地址

• type:请求方法,默认为 get

• dataType:服务端响应数据类型

• contentType:请求体内容类型,默认 application/x-www-form-urlencoded

• data:需要传递到服务端的数据,如果 GET 则通过 URL 传递,如果 POST 则通过请求体传递

• timeout:请求超时时间

• beforeSend:请求发起之前触发

• success:请求成功之后触发(响应状态码 200)

• error:请求失败触发

• complete:请求完成触发(不管成功与否)

GET 请求

$.get()

• GET 请求快捷方法

$.get(url, data, callback)

    // 发送 get 请求
    $.ajax({
      url: "http://localhost:3000/comments",
      type: "get",
      dataType: "json",
      data: {"id": 2},
      success: function (data) {
        console.log(data);
      }
    })
    

    // 化简后的方法直接发送 get 请求
    $.get("http://localhost:3000/comments", {"id": 1}, function (data) {
      console.log(data);
    })

POST 请求

$.post()

• POST 请求快捷方法

$.post(url, data, callback)

POST 相当于新增一条数据, 返回的是新增的数据

    // 发送 post 请求
    $.ajax({
      url: "http://localhost:3000/comments",
      type: "post",
      dataType: "json",
      data: {"postId": 2, "content": "bad"},
      success: function (data) {
        console.log(data);
      }
    })

    // $.post() 快捷方法发送请求
    $.post("http://localhost:3000/comments", {"postId": 3, "content": "bad"},function (data) {
      console.log(data);
    })

快捷方法的前后结果:

image.png

put 更改

没有快捷方法

  • url发生了变化, 比如要更改comments中id为4的数据, 需要加/4
  • 可以局部更改也可以整体更改, 更改后的数据就是data中的数据. 如果缺少了某一个属性, 那么更改后的数据中也没有相应的属性.
    // put 请求,更改数据
    $.ajax({
      url: "http://localhost:3000/comments/4",
      type: "put",
      dataType: "json",
      data: {"content": "good", "postId": 2},
      success: function (data) {
        console.log(data)
      }
    })

image.png

delete 删除

  • 没有返回, 不需要传参, 不用写datadataType
    // delete 请求,删除数据
    $.ajax({
      url: "http://localhost:3000/comments/5",
      type: "delete",
      success: function (data) {
        console.log(data)
      }
    })

image.png

ajaxSetup() 方法

设置默认的参数, 在其他的ajax()方法中相同的内容就不用写了, 可以简化操作.

    // ajaxSetup() 方法,设置默认的参数
    $.ajaxSetup({
      url: "http://localhost:3000/users",
      type: "post"
    })
    // 发送 ajax请求
    $.ajax({
      data: {"name": "polly", "age": 17, "class": 4}
    })
    $.ajax({
      data: {"name": "james", "age": 18, "class": 4}
    })

Axios

Axios 是目前应用最为广泛的 AJAX 封装库, 地址:unpkg.com/axios/dist/…

使用 script 标签引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

例. get请求

    axios.get("http://localhost:3000/users?id=1")
      .then(function (response) {
        console.log(response.data)
      })
      .catch(function (error) {
        console.log(error)
      })

response的内容: image.png

response.data 得到的就是我们需要的数据

Axios API

可以通过向 axios() 传递相关配置来创建请求, 有下面两种方式:

  • axios(config), config为对象格式的配置选项

  • axios(url, config) config 可以不设置, 不设置默认get. 除了把url单独拿出来放到前面以外, 跟第一种方式没有什么不同.

    // axios(url, config) 方法
    axios("http://localhost:3000/posts", {
      params: {
        id: 1
      }
    })
      .then(function (res) {
        console.log(res.data)
      })
      .catch(function (error) {
        console.log(error)
      })

常用配置项:

• url 用于请求的服务器 URL,必需

• method 创建请求时使用的方法,get,post等

• baseURL 传递相对 URL 前缀,将自动加在 url 前面,可以不设置

• headers 即将被发送的自定义请求头, 值是对象类型的参数, 设置给post (可以省略, 默认是json格式的)

• params 即将与请求一起发送的 URL 参数, 值是对象类型的参数, 设置给get或delete方法. 不设置params, 直接写在url上也是可以的.

• data 作为请求主体被发送的数据

• timeout 指定请求超时的毫秒数(0 表示无超时时间)

• responseType 表示服务器响应的数据类型,默认 “json”,可以不设置

• axios(url, config) config 可选

then 和 catch 的用法

axios()

.then(function (response) {

// 正常请求的响应信息对象 response

})

.catch(function (error) {

//捕获错误

})

全局配置默认值

可以指定将被用在各个请求的配置默认值

    // 全局配置默认值
    axios.defaults.baseURL = "http://localhost:3000";
    
    // axios 方法
    axios({
      url: "/comments",
      method: "get"
    }).then(function (res) {
      console.log(res.data)
    }).catch(function (error) {
      console.log(error)
    })

拦截器

在请求或响应被 then 或 catch 处理前拦截它们。

全局拦截, 对所有的axios方法都进行拦截, 可以替换全局配置默认值这种方式.

image.png

请求拦截器: 在axios方法的then和catch执行之前, 将request拦截器中的内容设置给axios方法.

响应拦截器: 先于then和catch方法得到响应内容, 然后再返回给axios方法执行. 比如可以只返回response中的data部分, 在then中就可以不加.data了

    // 使用拦截器,对请求进行拦截处理
    axios.interceptors.request.use(function (config) {
      config.params = {
        id: 2
      }
      config.baseURL = "http://localhost:3000"
      return config
    })
    
    // 对响应进行拦截
    axios.interceptors.response.use(function (response) {
      return response.data;
    })
    
    // axios 方法    
    axios("/posts")
    .then(function (res) {
      console.log(res)
    })
    .catch(function (error) {
      console.log(error)
    });

快速请求方法

• axios.get(url[, config])

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

• axios.delete(url[, config])

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

get和delete是一样的, post和put是一样的

axios.get(url[, config])

    // get 请求
    // 方法一: 直接把参数加在url后面
    axios.get("http://localhost:3000/users?id=2")
      .then(function (res) {
        console.log(res.data)
      })
      
    //方法二: 通过params传参
    axios.get("http://localhost:3000/users",{
      params: {
        id: 3
      }
    })
      .then(function (res) {
        console.log(res.data)
      })

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

    // post 请求 ,添加数据
    axios.post("http://localhost:3000/users",{
      "name": "nancy",
      "age": 19,
      "class": 2
    })
    .then(function (res) {
      console.log(res.data)
    })

post的then()方法可以不写, 因为本质上是添加了数据; 但get必须写then()方法, 因为要对数据进行后续操作.

XMLHttpRequest 2.0

onload / onprogress

xhr.onload 事件:只在请求完成时触发(readyState=4时触发), 可以替换之前的原生Ajax响应结束条件.

xhr.onprogress 事件:只在请求进行中触发(readyState=3时触发), 不常用

    var xhr = new XMLHttpRequest();
    xhr.open("GET", "http://localhost:3000/posts");
    //为了同步异步都顺利, 写在send之前
    xhr.onload = function () {
      console.log("load",this.readyState)
    }
    xhr.onprogress = function (e) {
      console.log("progress",this.readyState)
      // 在周期性请求过程中,接收到的数据的个数
      console.log(e.loaded);
      // 接收数据的总个数
      console.log(e.total);
    }
    xhr.send(null);

response 属性

以对象的形式表述响应体,其类型取决于 responseType 的值。设置responseType 的值,可以通过特定的类型请求数据, 避免后面用parse()方法把数据转换成对象.

responseType 要在调用 open() 初始化请求之后,在调用 send() 发送请求到服务器之前设置方可生效。

    var xhr = new XMLHttpRequest();
    xhr.open("GET", "http://localhost:3000/posts");
    xhr.responseType = "json";
    xhr.onload = function () {
      console.log(this.response);
    }    
    xhr.send(null);

image.png