拦截器 get请求与post请求

longfan_

已于 2022-06-06 19:36:38 修改

阅读量695

点赞数

文章标签： ajax

于 2022-04-25 19:07:40 首次发布

本文链接：https://blog.csdn.net/longfan_/article/details/124408317

版权

1.axios拦截器

/* axios拦截器 */
      // 添加请求拦截器
      axios.interceptors.request.use(function (config) {
          // 在发送请求之前做些什么
          return config;
        }, function (error) {
          // 对请求错误做些什么
          return Promise.reject(error);
        });
      // 添加响应拦截器
      axios.interceptors.response.use(function (response) {
          // 对响应数据做点什么
          return response;
        }, function (error) {
          // 对响应错误做点什么
          return Promise.reject(error);
        })

2.axios基地址

//设置axios基地址 : 所有的请求 默认添加前面的 http://域名
      axios.defaults.baseURL = 'http://域名'

3. onreadystatechang事件

/* 学习目标：XMLHttpRequest的两个事件

1. onload事件：接收服务器响应的数（一次请求，只会执行一次）

2. onreadystatechang事件 : 作用与onload事件一致（一次请求，会执行多次）

面试点： XMLHttpRequest对象的状态码（xhr请求状态变化）（xhr.readyState）

0: 请求未初始化 (创建了xhr对象，但是还没调用open)

1: 服务器已连接

2. 请求已接收 (send之后,服务器已经接收了请求)

3. 服务器处理中

4. 服务器已响应（ 4状态码等同于onload事件）

//(1).实例化ajax对象
      let xhr = new XMLHttpRequest()
      console.log(xhr.readyState) //0: 请求未初始化(没有设置请求方法和地址)
      //(2).设置请求方法和地址
      // get请求的数据直接添加到url后面 格式是 url？key=value
      xhr.open("get", "http://www.liulongbin.top:3009/api/login")
      console.log(xhr.readyState) //1: 服务器已连接
      //(3).发送请求 ： 参数格式  'key=value'
      xhr.send(xhr.readyState) //1: 服务器已连接
      //(4).注册回调函数
      //a. onload 是新式浏览器才支持的
      //b. 如果要兼容更早的浏览器，可以使用 onreadystatechange
      //c. onreadystatechange触发时机 ： xhr.readState状态变化
      // xhr.onload = function() {};

      xhr.onreadystatechange = function() {
        console.log(xhr.readyState)//执行三次 2请求 3处理 4响应
        //onreadystatechange会触发多次，一般需要判断xhr.readState == 4 才获取响应数据
        // onload事件只会走一次，就是readyState为4的时候执行
        if (xhr.readyState == 4) {
          console.log(xhr.responseText)
        }
      }