欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

【axios】XHR的ajax封装+axios拦截器调用+请求取消

程序员文章站 2022-07-09 21:06:15
...

Http

1. 前后台交互的基本过程

1. 前后应用从浏览器端向服务器发送HTTP请求(请求报文)
2. 后台服务器接收到请求后, 调度服务器应用处理请求, 向浏览器端返回HTTP响应(响应报文)
3. 浏览器端接收到响应, 解析显示响应体/调用监视回调

2. HTTP请求报文

1. 请求行: 请求方式/url
    method url
    GET /product_detail?id=2
    POST /login
2. 多个请求头: 一个请求头由name:value组成, 如Host/Cookie/Content-Type头
    Host: www.baidu.com
    Cookie: BAIDUID=AD3B0FA706E; BIDUPSID=AD3B0FA706;
    Content-Type: application/x-www-form-urlencoded 或者 application/json
3. 请求体
    username=tom&pwd=123
    {"username": "tom", "pwd": 123}

3. HTTP响应报文

1. 响应行: 响应状态码/对应的文本
2. 多个响应头: 如 Content-Type / Set-Cookie 头
    Content-Type: text/html;charset=utf-8
    Set-Cookie: BD_CK_SAM=1;path=/
3. 响应体
    html文本/json文本/js/css/图片...

4. post请求体文本参数格式

1. Content-Type: application/x-www-form-urlencoded;charset=utf-8
    用于键值对参数,参数的键值用=连接, 参数之间用&连接
    例如: name=%E5%B0%8F%E6%98%8E&age=12
2. Content-Type: application/json;charset=utf-8
    用于json字符串参数
    例如: {"name": "%E5%B0%8F%E6%98%8E", "age": 12}
3. Content-Type: multipart/form-data
    用于文件上传请求

5. 常见响应状态码

200	OK                     请求成功。一般用于GET与POST请求
201 Created                已创建。成功请求并创建了新的资源
401 Unauthorized           未授权/请求要求用户的身份认证
404 Not Found              服务器无法根据客户端的请求找到资源
500 Internal Server Error  服务器内部错误,无法完成请求

6. 不同类型的请求及其作用:

1. GET: 从服务器端读取数据
2. POST: 向服务器端添加新数据
3. PUT: 更新服务器端已经数据
4. DELETE: 删除服务器端数据

7. API的分类

1. REST API:    restful
    发送请求进行CRUD哪个操作由请求方式来决定
    同一个请求路径可以进行多个操作
    请求方式会用到GET/POST/PUT/DELETE
2. 非REST API:   restless
    请求方式不决定请求的CRUD操作
    一个请求路径只对应一个操作
    一般只有GET/POST

测试: 可以使用json-server快速搭建模拟的rest api 接口

XHR

1. 理解

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

2. 区别一般的HTTP请求与ajax请求

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

3. 使用语法

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

4.XHR的简单封装

/* 
    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, params={}, data={}, method='GET'}) {
      // 返回一个promise对象
      return new Promise((resolve, reject) => {
        // 创建一个XHR对象
        const xhr = new XMLHttpRequest()
        
        // 根据params拼接query参数(拼接到url上)  id=1&xxx=abc
        /* 
        {
          id: 1,
          xxx: 'abc'
        }
        */
        let queryStr = Object.keys(params).reduce((pre, key) => {
          pre += `&${key}=${params[key]}`
          return pre
        }, '')
        if (queryStr.length>0) {
          queryStr = queryStr.substring(1)
          url += '?' + queryStr
        }
        /*另一种拼接
        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
        }
*/
        // 请求方式转换为大写
        method = method.toUpperCase()
        
        // 初始化一个异步请求(还没发请求)
        xhr.open(method, url, true)
        // 绑定请求状态改变的监听
        xhr.onreadystatechange = function () {
          // 如果状态值不为4, 直接结束(请求还没有结束)
          if (xhr.readyState !== 4) {
            return
          }
          // 如果响应码在200~~299之间, 说明请求都是成功的
          if (xhr.status>=200 && xhr.status<300) {
            // 准备响应数据对象
            const responseData = {
              data: xhr.response,
              status: xhr.status,
              statusText: xhr.statusText
            }
            // 指定promise成功及结果值
            resolve(responseData)
          } else { // 请求失败了
            // 指定promise失败及结果值
            const error = new Error('request error staus '+ xhr.status)
            reject(error)
          }
        }

        // 指定响应数据格式为json ==> 内部就是自动解析好
        //不再单独需要对响应的json字符串转换为json对象 JSON.parse(xhr.response)
        xhr.responseType = 'json'

        // 如果是post/put请求
        if (method==='POST' || method==='PUT') {
          // 设置请求头: 使请求体参数以json形式传递
          xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8')
          // 发送json格式请求体参数,得转换为json字符串
          const dataJson = JSON.stringify(data) 
          // 发送请求, 指定请求体数据
          xhr.send(dataJson)
        } else {// GET/DELETE请求
          // 发送请求
          xhr.send(null)
        }
      })
    }

axios

1. axios的特点

基本promise的异步ajax请求库
浏览器端/node端都可以使用
支持请求/响应拦截器
支持请求取消
请求/响应数据转换
批量发送多个请求

PS:JQuery发ajax请求必须得先指定回调,但axios不用

2. axios常用语法

axios(config): 通用/最本质的发任意类型请求的方式
axios(url[, config]): 可以只指定url发get请求
axios.request(config): 等同于axios(config)
axios.get(url[, config]): 发get请求
axios.delete(url[, config]): 发delete请求
axios.post(url[, data, config]): 发post请求
axios.put(url[, data, config]): 发put请求

axios.defaults.xxx: 请求的默认全局配置
axios.interceptors.request.use(): 添加请求拦截器
axios.interceptors.response.use(): 添加响应拦截器

axios.create([config]): 创建一个新的axios(它没有下面的功能)

axios.Cancel(): 用于创建取消请求的错误对象
axios.CancelToken(): 用于创建取消请求的token对象
axios.isCancel(): 是否是一个取消请求的错误
axios.all(promises): 用于批量执行多个异步请求
axios.spread(): 用来指定接收所有成功数据的回调函数的方法

3. 难点语法理解与使用

1). axios.create(config)   #返回的是函数对象
    a. 根据指定配置创建一个新的axios, 也就就每个新axios都有自己的配置
    b. 新axios只是没有取消请求和批量发请求的方法, 其它所有语法都是一致的
    c. 为什么要设计这个语法?
        需求: 项目中有部分接口需要的配置与另一部分接口需要的配置不太一样, 如何处理
        解决: 创建2个新axios, 每个都有自己特有的配置, 分别应用到不同要求的接口请求中
    axios.defaults.baseURL = 'http://localhost:3000'
    // 使用axios发请求
    axios({
      url: '/posts' // 请求3000
    })
    // axios({
    //   url: '/xxx' // 请求4000
    // })

    const instance = axios.create({
      baseURL: 'http://localhost:4000'
    })
    // 使用instance发请求
    // instance({
    //   url: '/xxx'  // 请求4000
    // })
    instance.get('/xxx')
2). 拦截器函数/ajax请求/请求的回调函数的调用顺序
    a. 说明: 调用axios()并不是立即发送ajax请求, 而是需要经历一个较长的流程
    b. 流程: 请求拦截器2 => 请求拦截器1 => 发ajax请求 => 响应拦截器1 => 响应拦截器2 => 请求的回调
    c. 注意: 此流程是通过promise串连起来的, 请求拦截器传递的是config, 响应拦截器传递的是response
            错误流程控制与错误处理

【axios】XHR的ajax封装+axios拦截器调用+请求取消

    /* 
    requestInterceptors: [{fulfilled1(){}, rejected1(){}}, {fulfilled2(){}, rejected2(){}}]
    responseInterceptors: [{fulfilled11(){}, rejected11(){}}, {fulfilled22(){}, rejected22(){}}]
    chain: [
      fulfilled2, rejected2, fulfilled1, rejected1, 
      dispatchReqeust, undefined, 
      fulfilled11, rejected11, fulfilled22, rejected22
    
    ]
    promise链回调: config 
                  => (fulfilled2, rejected2) => (fulfilled1, rejected1)   // 请求拦截器处理
                  => (dispatchReqeust, undefined) // 发请求
                  => (fulfilled11, rejected11) => (fulfilled22, rejected22) // 响应拦截器处理
                  => (onResolved, onRejected) // axios发请求回调处理
    */

    // 添加请求拦截器(回调函数)
    axios.interceptors.request.use(
      config => {
        console.log('request interceptor1 onResolved()')
        return config  //同promise将成功继续传递   否则没reuturn返回的promise值为undifined
      },
      error => {
        console.log('request interceptor1 onRejected()')
        return Promise.reject(error);  //同promise,异常传递
      }
    )
    axios.interceptors.request.use(
      config => {
        console.log('request interceptor2 onResolved()')
        return config
      },
      error => {
        console.log('request interceptor2 onRejected()')
        return Promise.reject(error);
      }
    )
    // 添加响应拦截器
    axios.interceptors.response.use(
      response => {
        console.log('response interceptor1 onResolved()')
        return response
      },
      function (error) {
        console.log('response interceptor1 onRejected()')
        return Promise.reject(error);
      }
    )
    axios.interceptors.response.use(
      response => {
        console.log('response interceptor2 onResolved()')
        return response
      },
      function (error) {
        console.log('response interceptor2 onRejected()')
        return Promise.reject(error);
      }
    )

    axios.get('http://localhost:3000/posts')
      .then(response => {
        console.log('data', response.data)
      })
      .catch(error => {
        console.log('error', error.message)
      })
3). 取消请求
    a. 基本流程: 
        配置cancelToken对象
        缓存用于取消请求的cancel函数
        在后面特定时机调用cancel函数取消请求
        在错误回调中判断如果error是cancel, 做相应处理
    b. 实现功能
        点击按钮, 取消某个正在请求中的请求
        在请求一个接口前, 取消前面一个未完成的请求

PS:取消请求成功,则进入失败回调,此时error是cancel对象,也有message属性

<body>
  <button onclick="getProducts1()">获取商品列表1</button><br>
  <button onclick="getProducts2()">获取商品列表2</button><br>
  <button onclick="cancelReq()">取消请求</button><br>

  <script src="https://cdn.bootcss.com/axios/0.19.0/axios.js"></script>
  <script>

    // 添加请求拦截器
    axios.interceptors.request.use((config) => {
      // 在准备发请求前, 取消未完成的请求
      if (typeof cancel==='function') {
          cancel('取消请求')
      }
      // 添加一个cancelToken的配置
      config.cancelToken = new axios.CancelToken((c) => { // c是用于取消当前请求的函数
        // 保存取消函数, 用于之后可能需要取消当前请求
        cancel = c
      })

      return config
    })

    // 添加响应拦截器
    axios.interceptors.response.use(
      response => {
        cancel = null
        return response
      },
      error => {
        if (axios.isCancel(error)) {// 取消请求的错误
          // cancel = null
          console.log('请求取消的错误', error.message) // 做相应处理
          // 中断promise链接
          return new Promise(() => {})
        } else { // 请求出错了
          cancel = null
          // 将错误向下传递
          // throw error
          return Promise.reject(error)
        }
      }
    )


    let cancel  // 用于保存取消请求的函数
    function getProducts1() {
      axios({
        url: 'http://localhost:4000/products1',
      }).then(
        response => {
          console.log('请求1成功了', response.data)
        },
        error => {// 只用处理请求失败的情况, 取消请求的错误的不用
          console.log('请求1失败了', error.message)          
        }
      )
    }

    function getProducts2() {

      axios({
        url: 'http://localhost:4000/products2',
      }).then(
        response => {
          console.log('请求2成功了', response.data)
        },
        error => {
          console.log('请求2失败了', error.message)
        }
      )
    }

    function cancelReq() {
      // alert('取消请求')
      // 执行取消请求的函数
      if (typeof cancel === 'function') {
        cancel('强制取消请求')
      } else {
        console.log('没有可取消的请求')
      }
    }
  </script>
</body>