20230407----重返学习-axios-fetch-pm2-url的组成

day-044-forty-four-20230407-axios-fetch-pm2-url的组成

axios

axios是ajax封装的,基于Promise+XMLHttpRequest来进行的封装。

axios请求类型

  • get类
    • 种类

      • axios.get()
      • axios.head()
      • axios.delete()
      • axios.options()
    • 语法

      • axios.get(url[,config]) 返回一个Promise实例
        • url 请求路径
        • config 配置项 对象 可有可无
          • baseURL:基础路径

          • params:传递的参数

            • 必须是一个无格式对象(plain object)或 URLSearchParams 对象
          • timeout: 超时时间

          • withCredentials: false 是否允许携带跨域资源凭证

          • responseType: ‘json’ //返回数据的类型

            • responseType 表示服务器响应的数据类型,
              • 可以是 ‘arraybuffer’, ‘blob’, ‘document’, ‘json’(默认), ‘text’, ‘stream’
          • onUploadProgress: function (progressEvent) {} 监控文件上传进度

          • onDownloadProgress: function (progressEvent) {} 监控文件下载进度

          • validateStatus 状态码成功范围

            validateStatus: function (status) {//状态码成功范围
              return status >= 200 && status < 300; // default
            }
            
    • get的url全写

      axios
        .get("http://localhost:8888/api/articleList?date=2021-05-21")
        .then((value) => {
          console.log(value);
        });
      
    • get的config分开写

      axios
        .get("/api/articleList", {
          baseURL: "http://localhost:8888",
          params: {
            date: "2021-05-21",
          },
        })
        .then((response) => {
          return response.data;
        })
      
    • get配置参数

      axios
        .get("/api/articleList", {
          baseURL: "http://localhost:8888",
          params: {
            date: "2021-05-21",
          },
          timeout: 1000,
          withCredentials: false,
          responseType: "json",
          validateStatus: function (status) {
            return status >= 200 && status < 400;
          },
        })
        .then((response) => {
          return response.data;
        })
        .then((value) => {
          console.log(value);
        })
        .catch((err) => {
          console.log(err);
        });
      
    • get全写

      axios({
        method: "get",
        url: "/api/articleList",
        baseURL: "http://localhost:8888",
        params: {
          date: "2021-05-21",
        },
        timeout: 1000,
        withCredentials: false,
        responseType: "json",
        validateStatus: function (status) {
          return status >= 200 && status < 400;
        },
      })
        .then((response) => {
          return response.data;
        })
        .then((value) => {
          console.log(value);
        })
        .catch((err) => {
          console.log(err);
        });
      
      • axios(config) connfig 配置项—>对象
        • method:'get' 默认get,请求方式
        • url:请求的路径
  • post类
    • 种类

      • axios.post()
      • axios.put()
      • axios.patch()
    • 语法

      • axios.post(url[,data,config])—返回一个Promise实例
        • url:请求路径
        • data:传递参数—>对象/字符串
        • config:配置项, 可有可无
          • baseURL:基础路径

          • timeout: 超时时间

          • withCredentials: false 是否允许携带跨域资源凭证

          • responseType: ‘json’ //返回数据的类型

            • responseType 表示服务器响应的数据类型,
              • 可以是 ‘arraybuffer’, ‘blob’, ‘document’, ‘json’(默认), ‘text’, ‘stream’
          • onUploadProgress 监控文件上传进度

            onUploadProgress: function (progressEvent) {} 监控文件上传进度
            
          • onDownloadProgress 监控文件下载进度

            onDownloadProgress: function (progressEvent) {} 监控文件下载进度
            
          • validateStatus 校验服务器返回状态码为多少才算请求成功

            validateStatus: function (status) {//状态码成功范围
              return status >= 200 && status < 300; // default
            }
            
          • transformRequest 允许在向服务器发送前,修改请求数据

            • 当需要对传递的参数进行格式转化—需要对传递的参数二次处理时
            • 只能用在 ‘PUT’, ‘POST’ 和 ‘PATCH’ 这几个请求方法****
            • 一般处理后需要设置请求头为对应的格式,但当调用了transformRequest设置的方法后,axios会自动识别请求头的Content-Type
              • 不过,如果担心axios识别不了请求头中请求体数据格式,也可以手动设置

                //设置请求头信息
                headers: {'Content-Type': 'application/x-www-form-urlencoded'}
                
    • post的配置

      axios.post("/user/login",{
          account:"18310612838",
          password:md5("1234567890")//md5方法是一个外部方法,需要引入,用于处理密码的转化。
      },{
          baseURL:"http://127.0.0.1:9999",
          transformRequest:function(data){//参数格式是 urlencoded
              //Qs.stringify()  将普通对象---》 urlencoded格式的数据
              //console.log(Qs.stringify(data));
              return Qs.stringify(data);//决定最终数据的格式//Qs.stringify()方法是外部Qs对象的一个内置方法,需要引入,用于把普通对象转成urlencoded格式的数据。
          }
      }).then(response=>{
          return response.data
      }).then(value=>{
          console.log(value)
      }).catch(err=>{
          console.log(err)
      })
      
    • post全写-axios.post()用axios()方式代替

      • method:“post”

      • url:“/user/login”

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

        • 只适用于这些请求方法 ‘PUT’, ‘POST’, 和 ‘PATCH’
        axios({
          url:"/user/login",
          method:"post",
          data:{
              account:"18310612838",
              password:md5("1234567890")//md5方法是一个外部方法,需要引入,用于处理密码的转化。
          },
          baseURL:"http://127.0.0.1:9999",
          transformRequest:function(data){//参数格式是 urlencoded
              return Qs.stringify(data);//决定最终数据的格式//Qs.stringify()方法是外部Qs对象的一个内置方法,需要引入,用于把普通对象转成urlencoded格式的数据。
          }
        }).then(response=>{
          return response.data
        }).then(value=>{
          console.log(value)
        }).catch(err=>{
          console.log(err)
        })
        

axios二次封装

Axios的二次配置 就是 将请求的公共部分提起出来

把多个请求之间公共的部分进行提取,后期在业务中再次发送数据请求,公共部分无需再次编写

  • 原版的

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <script src="axios.min.js">//这个是引入axios()的,用于发送axaj请求</script>
        <script src="md5.min.js">//这个是引入md5()方法的,用于加密密码</script>
        <script src="qs.js">//这个是引入Qs.stringify()方法的,用于把普通对象转成query格式字符串的</script>
        <script>
            axios.get("/api/articleList",{
                baseURL:"http://localhost:8888",
                params:{
                    date:"2021-05-21"
                },
                timeout:1000,
                withCredentials: false,
                validateStatus: function (status) {
                  return status >= 200 && status < 400;
                }
            }).then(response=>{
                return response.data;
            }).then(value=>{
              console.log(value);
            }).catch(err=>{
                console.log(err);
            })
    
    
            axios.get("/api/swiper",{
                baseURL:"http://localhost:8888",
                timeout:1000,
                withCredentials: false,
                validateStatus: function (status) {
                  return status >= 200 && status < 400;
                }
            }).then(response=>{
                return response.data;
            }).then(value=>{
              console.log(value);
            }).catch(err=>{
                console.log(err);
            })
    
            axios.post("/user/login",{
                account:"18310612838",
                password:md5("1234567890")
            },{
                baseURL:"http://127.0.0.1:9999",
                transformRequest:function(data){
                  return Qs.stringify(data);
                }
            }).then(response=>{
                return response.data
            }).then(value=>{
                console.log(value)
            }).catch(err=>{
                console.log(err)
            })
        </script>
    </body>
    </html>
    
  • 处理后的,axios做了公共的处理,在http.js中处理了一个。所以在html里,发起一个axios请求,不用做一些配置。

    • ./http.js

      //Axios 二次封装文件
      
      //提取baseURL
      axios.defaults.baseURL = "http://localhost:8888";
      
      //注释--》404错误
      //axios.defaults.baseURL="http://localhost:8888";
      
      //提出超时时间
      axios.defaults.timeout = 1000;
      
      //请求超时错误
      //axios.defaults.timeout=1;
      
      //提取 跨域资源凭证
      axios.defaults.withCredentials = false;
      
      //提取状态码的范围设置
      axios.defaults.validateStatus = function (status) {
        return status >= 200 && status < 400;
      };
      
      //判断对象是不是纯对象
      const isPlainObject = function isPlainObject(obj) {
        let proto, Ctor;
        if (!obj || Object.prototype.toString.call(obj) !== "[object Object]")
          return false;
        proto = Object.getPrototypeOf(obj);
        if (!proto) return true;
        Ctor = proto.hasOwnProperty("constructor") && proto.constructor;
        return typeof Ctor === "function" && Ctor === Object;
      };
      //post类提取 transformRequest
      axios.defaults.transformRequest = function (data) {
        //纯对象 {}---》urlencoded
        if (isPlainObject(data)) {
          data = Qs.stringify(data); //是纯对象才会转换
        }
        return data;
      };
      
      // 添加请求拦截器
      //客户端----- 统一做某些操作 ----服务器
      axios.interceptors.request.use(
        function (config) {
          // 在发送请求之前做些什么
          // 发送请求的时候,一般会在请求头里统一配置 token
          // let token=...
          // if(token){
          //     config.headers.authorzation=token
          // }
          return config;
        },
        function (error) {
          // 对请求错误做些什么
          return Promise.reject(error);
        }
      );
      
      // 添加响应拦截器
      //服务器----- 统一做某些操作 ----客户端
      axios.interceptors.response.use(
        function (response) {
          // 对响应数据做点什么
          //console.log(response,"111");
          return response.data;
        },
        function (error) {
          //错误
          //1. 有状态码
          //    response--->status--->404/500
          //2. 没有状态码的错误
          //   2.1 请求超时  code: "ECONNABORTED"   response: undefined
          //   2.2 断网  BOM对象--->navigator对象(浏览器相关信息)navigator.onLine true 有网
          let err = "未知错误";
          if (error.response) {
            //有状态码错误
            switch (error.response.status) {
              case 404:
                err = "找不到页面";
                break;
              case 500:
                err = "服务器错误";
                break;
              //....
              default:
                break;
            }
          } else {
            //没有状态码的错误
            if (error.code === "ECONNABORTED") {
              err = "请求超时";
            } else if (!navigator.onLine) {
              err = "没有网络";
            }
          }
      
          // 对响应错误做点什么
          return Promise.reject(err);
        }
      );
      
    • index.html

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
      </head>
      <body>
          <script src="axios.min.js">//这个是引入axios()的,用于发送axaj请求</script>
          <script src="md5.min.js">//这个是引入md5()方法的,用于加密密码</script>
          <script src="qs.js">//这个是引入Qs.stringify()方法的,用于把普通对象转成query格式字符串的</script>
          <script src="http.js"></script>
          <script>
      
              axios.get("/api/articleList",{
                  params:{
                      date:"2021-05-21"
                  }
              }).then(value=>{
                console.log(value);
              }).catch(err=>{
                  console.log(err);
              })
      
      
              axios.get("/api/swiper")
              .then(value=>{
                console.log(value);
              }).catch(err=>{
                  console.log(err);
              })
      
              axios.post("/user/login",{
                  account:"18310612838",
                  password:md5("1234567890")
              },{
                  //自己配置的属性,优先级高于提取的部分
                  baseURL:"http://127.0.0.1:9999"
              }).then(value=>{
                  console.log(value)
              }).catch(err=>{
                  console.log(err)
              })
          </script>
      </body>
      </html>
      
设置axios默认配置
  • axios.defaults.xxx 默认配置

    • 统一配置默认配置-baseURL

      • axios.defaults.baseURL = “http://localhost:8888”;
    • 统一配置默认配置-超时时间

      • axios.defaults.timeout = 1000;
    • 统一配置默认配置-跨域资源凭证

      • axios.defaults.withCredentials = false;
    • 统一配置默认配置-状态码的范围设置

      axios.defaults.validateStatus = function (status) {
        return status >= 200 && status < 400;
      };
      
    • 统一配置默认配置-transformRequest

      • post类统一生效,虽然get类也相当于设置了,但get类请求并不会使用这里

        //判断对象是不是纯对象
        const isPlainObject = function isPlainObject(obj) {
          let proto, Ctor;
          if (!obj || Object.prototype.toString.call(obj) !== "[object Object]")
            return false;
          proto = Object.getPrototypeOf(obj);
          if (!proto) return true;
          Ctor = proto.hasOwnProperty("constructor") && proto.constructor;
          return typeof Ctor === "function" && Ctor === Object;
        }; 
        axios.defaults.transformRequest = function (data) {
          //纯对象 {}---》urlencoded
          if (isPlainObject(data)) {
            data = Qs.stringify(data); //是纯对象才会转换//Qs.stringify()方法是外部Qs对象的一个内置方法,需要引入,用于把普通对象转成urlencoded格式的数据。
          }
          return data;
        };
        
设置axios数据拦截器
  • 请求拦截器:发生在 “配置项准备完毕” 和 “发送请求” 之间
    • 添加请求拦截器
      • 客户端----- 统一做某些操作 ----服务器
        • 这里统一做某些操作的时机就在请求拦截器里进行

          axios.interceptors.request.use(
            function (config) {
              // 在发送请求之前做些什么
              // 发送请求的时候,一般会在请求头里统一配置 token
              // let token=...
              // if(token){
              //     config.headers.authorzation=token
              // }
              return config;
            },
            function (error) {
              // 对请求错误做些什么
              return Promise.reject(error);
            }
          );
          
          • config对象包含的就是准备好的配置项,最后返回啥配置,就按照这些配置发请求。这个操作在第一个函数中执行。返回的结果就是ajax发送的请求头及请求体。
          • config对象也可能错误,比如url设置错了之类的。处理错误但也要返回错误,因为后续别人可能要用catch来接收及处理。
            • 返回的结果就是axios返回的Promise实例对象的catch()中得到的值。
  • 响应拦截器:发生在 “服务器返回结果” 和 “业务代码自己处理 .then” 之间
    • 添加响应拦截器
      • 服务器----- 统一做某些操作 ----客户端

        axios.interceptors.response.use(
          function (response) {
            // 对响应数据成功的返回值做点什么
            //console.log(response,"111");
            return response.data;
          },
          function (error) {
            //错误
            //1. 有状态码
            //    response--->status--->404/500
            //2. 没有状态码的错误
            //   2.1 请求超时  code: "ECONNABORTED"   response: undefined
            //   2.2 断网  BOM对象--->navigator对象(浏览器相关信息)navigator.onLine true 有网
            let err = "未知错误";
            if (error.response) {
              //有状态码错误
              switch (error.response.status) {
                case 404:
                  err = "找不到页面";
                  break;
                case 500:
                  err = "服务器错误";
                  break;
                //....
                default:
                  break;
              }
            } else {
              //没有状态码的错误
              if (error.code === "ECONNABORTED") {
                err = "请求超时";
              } else if (!navigator.onLine) {
                err = "没有网络";
              }
            }
        
            // 对响应错误做点什么
            return Promise.reject(err);
          }
        );
        
        • 第一个函数形参一般为后端成功返回消息后才执行,返回的结果就是axios返回的Promise实例对象的then()第一个函数中的结果。
        • 第二个函数开始一般为后端没有成功返回后才执行。
          • 返回的结果就是axios返回的Promise实例对象的catch()中得到的值。
          • 错误分两类
            1. 有状态码
              • 如: response—>status—>404/500
            2. 没有状态码的错误
              1. 请求超时 code: “ECONNABORTED” response: undefined
              2. 断网
                • 可以用 BOM对象—>navigator对象(浏览器相关信息)来判断
                  • navigator.onLine true 有网

fetch

fetch是es6 新增的,其核心并不是XMLHttpRequest。而是一个与XMLHttpRequest平级的基础通信功能。

fetch语法

  • fetch(url,config) 返回一个Promise实例对象
    • url:请求路径 get类参数直接拼接到url的后面
    • config 配置项
      • method: ‘POST’, // *GET(默认get), POST, PUT, DELETE

      • mode: ‘cors’,是否允许跨域

        • no-cors(不允许), *cors(允许), same-origin(同源允许)
      • credentials:是否是否允许携带跨域资源凭证

        • include(允许), *same-origin(同源允许), omit(不允许)
      • cache: ‘no-cache’;是否缓存 不缓存no-cache

      • headers 设置请求头

        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        
      • body: JSON.stringify(data) post类请求的参数

        let data={
          account:"18310612838",
          password:md5("1234567890") 
        }
        
        fetch("http://127.0.0.1:9999/user/login",{
            method:"POST",
            mode: 'cors',
            credentials:"omit",
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded',
            },
            body:Qs.stringify(data)
        }).then(response=>{
            return response.json()//接收数据,数据格式是json
        }).then(value=>{
          console.log(value);
        })
        

Promise实例对象的正确结果返回值

fetch()返回的Promise实例对象的正确结果的结果值不是一个对象,而是一个Response实例对象。

fetch("./",{
    mode: 'cors',
    credentials:"omit"
}).then(response=>{
    console.log(response)//不会存在数据,必须调用原型上的方法才能获取数据
    //原型上的方法,只能执行1次,多了就报错
      return response.json()//接收数据,数据格式是json
}).then(value=>{
    console.log(value);
})
  • Response实例对象不会存在数据,必须调用Response原型上的方法才能获取数据
    • response.text():得到文本字符串。
    • response.json():得到 JSON 对象。
    • response.blob():得到二进制 Blob 对象。
    • response.formData():得到 FormData 表单对象。
    • response.arrayBuffer():得到二进制 ArrayBuffer 对象。
  • 同一个Response实例对象,它的原型上的方法,只能执行1次,多了就报错

pm2

一般打开一个前端的后台项目,需要用node执行,同时该cmd窗口不能关闭,监听的端口才会起作用

而pm2可以替代node执行一些命令

在pm2关闭窗口后,对应的后台服务仍然开启 除非关闭电脑,或者适用特定的命令关闭

安装pm2

npm i pm2 -g

pm2命令

  1. pm2 list 查看启动的服务

    • 查看全局启动的pm2项目

      pm2 list //查看启动的项目
      
  2. pm2 start xxx.js --name XXX 启动项目

  3. pm2 stop XXX(名称) 关闭XXX服务

  4. pm2 restart XXX 重新启动项目

  5. pm2 delete XXX 删除某个服务

  6. pm2 start all启动所有项目

  7. pm2 log 查看日志

url的组成

  • 例子

    let theUrl1 = `http://127.0.0.1:8848/aaa2023_01/aaa.html?name=lili&age=18#teacher`
    let theUrl2 = `http://www.baidu.com/aaa2023_01/aaa.html?name=lili&age=18#teacher`
    
    • 其中:
      • *协议:http:// https:// ftp://
      • *域名: 127.0.0.1 www.baidu.com
      • *端口号:8848 http://--80> https==》443
      • 请求资源路径:/aaa2023_01/aaa.html
      • 查询字符串/问号传参/query: ?name=lili&age=18
      • HASH值(哈希): #teacher

进阶参考

  1. axios 中文文档
  2. 使用 Fetch - MDN
  3. Fetch API 教程 - 阮一峰的网络日志
  4. chrome常用启动参数
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值