【博学谷学习记录】超强总结，用心分享 _ 前端开发 Ajax

---

Ajax 的基础用法

客户端浏览器在请求服务器上的数据时，根据操作性质的不同，可以分为以下 5 种常见的操作：

1    POST        向服务器新增数据      （也可用于用户登录）
2    GET         从服务器获取数据
3    DELETE      删除服务器上的数据
4    PUT         更新服务器上的数据（侧重于完整更新：例如更新用户的完整信息）
5    PATCH       更新服务器上的数据（侧重于部分更新：例如只更新用户的手机号）

---

axios

前端圈最火的、专注于数据请求的库。

get基本语法：

axios({
    url:'http://www.liulongbin.top:3009/api/getbooks',
    method: 'get',
    params:{                    //用于指定查询条件。
        id:2,
        bookname:'红楼梦'
    }
}).then(res => {
    console.log(res.data.data[0].bookname);
})

注：查询参数会拼接到url地址后面，使用？隔开；多个参选参数之间用 & 隔开

http://www.liulongbin.top:3009/api/getbooks?id=2&bookname=红楼梦

post基本语法：

btn.addEventListener('click',function(){
    axios({
        url:'http://www.liulongbin.top:3009/api/addbook',
        method:'post',
        data:{           //发送给服务器的数据
            bookname:'哈哈嘻嘻',
            author:'哈哈',
            publisher:'黑马出版社'
        }
    }).then(({data:res})=>{
        console.log(res);
    })
})

注：data可以是对象格式，也可以是键值对字符串格式。'book='xxx'&author='xxx''
注：post请求提交的数据，并没有拼接到URL地址的末尾，因为浏览器对URL长度有限制。
数据在”请求体“里面，在浏览器的payload（载荷）中可以看见

注：请求方式是get时，可以写params查询参数，不可以写data请求体参数，写了等于没写；而请求方式是post时，可以写data请求体参数，也可以写params查询参数

delete基本语法： 利用params查询参数选择要删除的数据

全局配置请求根路径：

axios.defaults.baseURL = 'http://www.liulongbin.top:3009 '
url:'/api/addbook'

---

axios 请求方法的别名

config 请求配置 data 请求体数据 可选值

axios.get(url[, config])          //params就属于请求配置
axios.delete(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

请求配置：
params:{} 查询参数
timeout: 1000 如果超过超过1秒，请求会被中断（请求超时）

axios.defaults.baseURL = 'http://www.liulongbin.top:3006'

axios.get('/api/get').then(({data})=>{
  console.log(data);
})

axios.get('/api/get',{
  params:{
    a:1,
    b:2
  }
}).then(({data})=>{
  console.log(data);
})

axios.post('/api/post',{
  username:'tayle',
  age:23
},{
  timeout:1000,  //超时时间
  params:{
    a:1,
    b:2
  }
}).then(({data})=>{
  console.log(data);
})

注：axios({})或者axios.get()，都是promise对象

---

请求报文 & 响应报文

请求报文（request） 规定了客户端以什么格式把数据发送给服务器
响应报文（response） 规定了服务器以什么格式把数据响应给客户端

浏览器的headers中可以查看，默认显示浏览器美化过的版本，可以点击view source显示原版

http 响应状态码 Vs 业务状态码

1. 所处的位置不同：
   在状态行中所包含的状态码，叫做“响应状态码”
   在响应体的数据中所包含的状态码，叫做“业务状态码”
   

2. 表示的结果不同：
   响应状态码只能表示这次请求的成功与否（成功或失败）
   业务状态码用来表示这次业务处理的成功与否

3. 通用性不同：
   响应状态码是由 http 协议规定的，具有通用性。每个不同的状态码都有其标准的含义，不能乱用。
   业务状态码是后端程序员自定义的，不具有通用性。