axios

一、第一章:http相关

1.1.MDN文档

https://developer.mozilla.org/zh-CN/docs/Web/HTTP

1.2.HTTP请求基本过程

1.2.1.浏览器端向服务器发送HTTP请求(请求报文)

1.2.2.服务器接收到请求后,处理请求,向服务器端返回HTTP响应(响应报文)

1.2.3.浏览器接收到响应,处理请求,解析显示响应体或调用回调函数

1.3.HTTP 请求报文

1.3.1. 请求行: General

	格式：method url
	例如：GET/product_detail?id = 2 或 POST/login/

1.3.2. 请求头(一般有多个请求头):Request Headers

	Host：www.baidu.com
	Cookie：xxxxx
	Content-Type-application/x-www-form-urlencoded 或者 application/json

1.3.3. 请求体

	username=tom&pwd=123
	{"username":"tom","pwd":"123"}

1.4.HTTP 响应报文

1.4.1. 响应行:

	格式:status statusText
	例如:200 ok 或 404 Not Found

1.4.2. 响应头(一般有多个)

	Conten-Type:text/html;charset=utf-8
	Set-Cookie:BD_CK_SAM=1;path=/

1.4.2. 响应体

	html/json/js/css/图片...

1.5.常见的响应状态码

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

1.6.请求方式与请求参数

1.6.1.请求方式

	POST(交差):向服务器端添加新数据------增(C)
	DELETE:删除服务器端数据-----删(D)
	PUT更新服务器端已存在的数据-----（改)(U)
	GET(索取):从服务器端读取数据 -----查(R)

1.6.2.请求参数

1. query 参数(查询字符串参数)

1. 参数包含在请求地址中，格式为:/xxx?name=zs&height=188

2. 敏感数据不使用query参数,因为是地址的一部分 有风险

3.注:query参数又称为查询字符串参数，编码方式为urlencoded

2. params参数

1.参数包含在请求地址中，格式如下：

		http://localhost:3000/add_person/zs/188

2.同理 敏感数据不使用params参数 同样有风险

3. 请求体参数

1.参数包含在请求体中，可通过浏览器开发工具查看

2.常用的两种格式:

格式一：urlencoded格式

	 例如:name=zs&height=188
	 对应请求头：Content-Type:application/x-www-form-urlencoded

格式二：json格式

	 例如：{“name”:"zs","height":188}

对应请求头：Content-Type:application/json

注意：

	1.GET请求不能携带请求体参数 因为没有请求体
	2.合理使用请求 携带的参数
	3.约定 的一些
		例如：form表单发送post请求 自动携带请求体参数 使用 urlencoded编码格式
		 jquery发送ajax-post请求时 使用带请求体参数 urlencoded编码格式
	4.开发中请求发给谁？用什么请求方式？携带什么参数？----参考项目的 API 接口文档

第二章、API相关

2.1.API的分类

2.1.1 REST API(restful风格的 API) 特点 多个请求方式 一个路径

	1.发送请求进行 增删改查(crud) 哪个操作由请求方式决定
	2.同一个请求路径可以进行多个操作
	3.请求方式有 	POST/DELETE/PUT/GET

2.1.2 非REST API(restless风格的 API) 特点 多个请求方式 多个路径

	1.请求方式 不决定哪个操作
	2.一个请求路径对应一个操作
	3.一般只有POST/GET

2.2.使用json-server 搭建 REST API

2.2.1 json-server是什么

	https://github.com/typicode/json-server
	1.用来快速搭建 REST API 的工具包 
	2.安装 JSON 服务器 CMD 全局安装  npm install -g json-server
	3.启动 JSON 服务器  json-server db.json 
	4.可自定义db.json里面的数据 

2.2.2 postman工具 进行接口测试

接口测试跑通之后，想要保存接口 Ctrl + s
这样下次打开Postman左侧有测好的记录
json-server 测试put请求 携带id 只能通过params方式 在url路径后面追加的方式

2.2.3 一般http请求与ajax请求 二者的关系

	1.ajax请求是一种特别的http请求;包含关系
	2.对于服务器端 二者没有区别 是浏览器端有区别
	3.浏览器端发请求 :只有XHR或fetch发出的才是ajax请求,其他所有的都是 非ajax请求
	4.浏览器端接收到响应:
		(1).一般请求,浏览器端一般会直接显示响应体数据,常说的 自动刷新了/跳转页面了
		(2).ajax请求,浏览器端不会对界面进行任何更新操作,是调用监视的回调函数并传入响应相关数据

---

第三章 axios的理解与使用

3.1. axios是什么

    1.目前 前端最流行的ajax请求库;
    2.react/vue官方都推荐的 一个请求库
    3.文档:https://github.com/axios/axios

3.2. axios特点

	1.基于promise的异步(解决回调地狱问题)  ajax请求库
	2.浏览器/node都可以使用
	3.支持 请求/响应拦截器
	4.支持请求取消
	5.请求/响应数据转换
	6.批量发生多个请求

3.3. 使用axios 发送请求

	新建文件src 新建index.html文件 引入axios  关键字axios

 	<button id="btn1">获取所有人button>
    <button id="btn2">获取某个人button>
    <input id="person_id" type="text" placeholder="请输入一个人的id">input><br>
    <button id="btn3">添加一个人button>
    <input id="person_name" type="text" placeholder="请输入名字">input>
    <input id="person_age" type="text" placeholder="请输入年龄">input>

 <script type="text/javascript">
        //
        const btn1 = document.getElementById('btn1');
        btn1.onclick =()=>{
             //函数体 发送get 请求 没有携带参数 (完整版)
            // var result = axios({
            //     url: 'http://localhost:3000/status',
            //     method: 'GET',
            // })
            //     .then(function (response) {
            //         console.log('请求成功了', response);
            //     })
            //     .catch(function (error) {
            //         console.log('请求错误', error);
            //     });
            // console.log(result);//Promise实例
            //精简版 如果后续场景需求不单一 还是完整版较合理  
            axios.get('http://localhost:3000/status').then(
                response =>{
                    console.log('请求成功了', response.data)
                },
                error =>{
                    console.log('请求错误', error);
                }

            )
        }
        //携带query参数发请求
         const personId = document.getElementById('person_id')
        btn2.onclick = () => {
            //完整版
            axios({
                url: 'http://localhost:3000/status',
                method: 'GET',
                params: { id: personId.value }//携带参数(params)字段 却是query参数
            }).then(
                response => {
                    console.log('请求成功了', response.data)
                },
                error => {

                }
            )
            //精简版
            axios.get('http://localhost:3000/status', { params: { id: personId.value } }).then(
                response => {
                    console.log('请求成功了', response.data)
                },
                error => {

                }
            )
        }
        const btn3 = document.getElementById('btn3');
        const person_name = document.getElementById('person_name');
        const person_age = document.getElementById('person_name');
        btn3.onclick = ()=>{
            axios({
                url:'http://localhost:3000/status',
                method:"POST",
                data:{name:person_name.value,age:person_age.value} // 携带请求体参数(json编码 常用 )
                // data:`name=${person_name.value}&age=${person_age.value}` // 携带请求体参数 (urlencoded编码)
            }).then(
                function (response) {
                    console.log('请求成功了', response.data)
                },
                error => {

                }
            )
            //精简版
            axios.get('http://localhost:3000/status',{name:person_name.value,age:person_age.value}).then(
                response => {
                    console.log('请求成功了', response.data)
                },
                error => {

                }
            )
        }
         //删除一个信息 
        const btn5 = document.getElementById('btn5')
        const deleteId = document.getElementById('deleteId')
        btn5.onclick = ()=>{
            //完整版 
            // axios({
            //     url:`http://localhost:3000/status/${deleteId.value}`,//携带 params 参数
            //     method:'DELETE',
            // }).then(
            //     response =>{
            //         console.log('请求了'.response.data);
            //     },
            //     error =>{
            //         console.log('失败了'.error);
            //     }
            // )
            //精简版
            axios.delete(`http://localhost:3000/status/${deleteId.value}`).then(
                response => {
                    console.log('请求了', response.data)  
                },
                error => {

                }
            )
        }
    </script>

    1.axios返回的是一个 Promise实例对象
    2.成功的值 是xios封装的 response对象,失败是error对象
    3.//携带query参数时,编写的配置项叫做params
    4.携带params参数时, params参数只能在URL路径中拼接 /

3.4 常用配置项

   axios({
                url: "http://localhost:3000/status",
                method: "GET",
                // params: { id }, //配置 query参数
                // data: { c: 3, d: 4 },//配置请求体参数 (json编码格式)
                // data: `e=5&f=6`,//配置请求体参数 (urlencoded编码格式)
                // timeout: 3000//配置超时时间
                // headers: { demo:123 }//配置请求头
                responseType:'json'// 配置响应数据的格式(默认值)
            })

3.5 axios的create方法

 const axios2 = axios.create({
            timeout: 3000,
            baseURL: 'https://api.apiopen.top'
        })