axios入门（二）

2021-12-14 05:46:24

XHR理解和使用

  1. 使用XMLHttpRequest（XHR）对象可以与服务器交互，也就是发送ajax请求
  2. 前端可以获取到数据，而无需让整个的页面刷新。
  3. 这使得Web可以只更新页面的局部，而不影响用户的操作

区别一般http请求与ajax请求

  1. ajax请求是一种特别的http请求
  2. 对服务器来说，没有任何区别，区别在浏览器端
  3. 浏览器端发送请求:只有XHR或fetch发出的才是ajax请求，其他的都是非ajax请求
  4. 浏览器端接收到响应
    • 一般请求：浏览器一般会直接显示响应体数据，也就是我们常说的刷新/跳转页面
    • ajax请求：浏览器不会对界面进行任何更新操作，只是调用监视的回调函数并传入响应相关数据

API

  1. XMLHttpRequest()：创建XHR对象的构造函数
  2. status：响应状态码值，比如2000,404
  3. statusText: 响应状态文本
  4. readyState:标识请求状态的只读属性
    0: 初始
    1: open()之后
    2: send()之后
    3: 请求中
    4: 请求完成
  5. onreadystatechange:绑定readyState给变的监听
  6. responseType:指定响应数据类型，如果是‘json’,得到响应后自动解析响应体数据
  7. response: 响应体数据，类型取决于responseType的指定
  8. timeout: 指定请求超时时间, 默认为0 代表没有限制
  9. ontimeout: 绑定超时的监听
  10. onerror: 绑定请求网络错误的监听
  11. open(): 初始化一个请求, 参数为: (method, url[, async])
  12. send(data): 发送请求
  13. abort(): 中断请求
  14. getResponseHeader(name): 获取指定名称的响应头值
  15. getAllResponseHeaders(): 获取所有响应头组成的字符串
  16. setRequestHeader(name, value): 设置请求头

XHR的ajax封装（简单版axios）

特点

  1. 函数的返回值为promise，成功的结果为response，异常的结果为error
  2. 能处理多种类型的请求：GET/POST/PUT/DELETE
  3. 函数的参数为一个配置对象
{
url: ‘‘, // 请求地址
method: ‘‘, // 请求方式GET/POST/PUT/DELETE
params: {}, // GET/DELETE 请求的query 参数
data: {}, // POST 或DELETE 请求的请求体参数
}
  1. 响应json数据自动解析为js

编码实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>使用XHR封装ajax请求参数</title>
</head>
<body>
  <button onclick="testGet()">发送GET请求</button><br>
  <button onclick="testPost()">发送POST请求</button><br>
  <button onclick="testPut()">发送PUT请求</button><br>
  <button onclick="testDelete()">发送Delete请求</button><br>


  <script>

    /* 1. GET请求: 从服务器端获取数据*/
    function testGet() {
      axios({
        // url: ‘http://localhost:3000/posts‘,
        url: ‘http://localhost:3000/posts2‘,
        method: ‘GET‘,
        params: {
          id: 1,
          xxx: ‘abc‘
        }
      }).then(
        response => {
          console.log(response)
        },
        error => {
          alert(error.message)
        }
      )
    }

    /* 2. POST请求: 服务器端保存数据*/
    function testPost() {
      axios({
        url: ‘http://localhost:3000/posts‘,
        method: ‘POST‘,
        data: {
          "title": "json-server---", 
          "author": "typicode---"
        }
      }).then(
        response => {
          console.log(response)
        },
        error => {
          alert(error.message)
        }
      )
    }

    /* 3. PUT请求: 服务器端更新数据*/
    function testPut() {
      axios({
        url: ‘http://localhost:3000/posts/1‘,
        method: ‘put‘,
        data: {
          "title": "json-server+++", 
          "author": "typicode+++"
        }
      }).then(
        response => {
          console.log(response)
        },
        error => {
          alert(error.message)
        }
      )
    }

    /* 2. DELETE请求: 服务器端删除数据*/
    function testDelete() {
      axios({
        url: ‘http://localhost:3000/posts/2‘,
        method: ‘delete‘
      }).then(
        response => {
          console.log(response)
        },
        error => {
          alert(error.message)
        }
      )
    }

    /* 
    1.函数的返回值为promise, 成功的结果为response, 失败的结果为error
    2.能处理多种类型的请求: GET/POST/PUT/DELETE
    3.函数的参数为一个配置对象
      {
        url: ‘‘,   // 请求地址
        method: ‘‘,   // 请求方式GET/POST/PUT/DELETE
        params: {},  // GET/DELETE请求的query参数
        data: {}, // POST或DELETE请求的请求体参数 
      }
    4.响应json数据自动解析为js的对象/数组
    */
    function axios({
      url,
      method=‘GET‘,
      params={},
      data={}
    }) {
      // 返回一个promise对象
      return new Promise((resolve, reject) => {

        // 处理method(转大写)
        method = method.toUpperCase()

        // 处理query参数(拼接到url上)   id=1&xxx=abc
        /* 
        {
          id: 1,
          xxx: ‘abc‘
        }
        */
        let queryString = ‘‘
        Object.keys(params).forEach(key => {
          queryString += `${key}=${params[key]}&`
        })
        if (queryString) { // id=1&xxx=abc&
          // 去除最后的&
          queryString = queryString.substring(0, queryString.length-1)
          // 接到url
          url += ‘?‘ + queryString
        }


        // 1. 执行异步ajax请求
        // 创建xhr对象
        const request = new XMLHttpRequest()
        // 打开连接(初始化请求, 没有请求)
        request.open(method, url, true)

        // 发送请求
        if (method===‘GET‘ || method===‘DELETE‘) {
          request.send()
        } else if (method===‘POST‘ || method===‘PUT‘){
          request.setRequestHeader(‘Content-Type‘, ‘application/json;charset=utf-8‘) // 告诉服务器请求体的格式是json
          request.send(JSON.stringify(data)) // 发送json格式请求体参数
        }

        // 绑定状态改变的监听
        request.onreadystatechange = function () {
          // 如果请求没有完成, 直接结束
          if (request.readyState!==4) {
            return
          }
          // 如果响应状态码在[200, 300)之间代表成功, 否则失败
          const {status, statusText} = request
          // 2.1. 如果请求成功了, 调用resolve()
          if (status>=200 && status<=299) {
            // 准备结果数据对象response
            const response = {
              data: JSON.parse(request.response),
              status,
              statusText
            }
            resolve(response)
          } else { // 2.2. 如果请求失败了, 调用reject()
            reject(new Error(‘request error status is ‘ + status))
          }
        }
      })
    }



  </script>
</body>
</html>

axios入门（二）

上一篇：axios的理解和使用


下一篇：uniapp调用上一个页面的方法