Ajax基础

URL参数查询：
链接语法: http: //xxxx.com/xxx/xxx?参数名1=值1 & 参数名2=值2
代码语法：
//查询参数 贵州省
axios({
        url:'http://hmajax.itheima.net/api/city',
        params:{
                pname:'贵州省'
        }
}).then(result => {
        //把获取的数据放入"my-p"盒子
        document.querySelector('.my-p').innerHTML = result.data.list.join('<br>')
});

错误处理语法：.catch(error =>{//处理错误))

map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。
语法：var map1 = array1.map(x => x * 2);

对服务器资源的常用请求方法：
GET-获取数据
POST-提交数据
PUT-修改数据（全部)
DELETE-删除数据
PATCH-修改数据（部分)

method:请求的方法；GET可以省略（不区分大小写)；data:提交数据

请求报文：浏览器发送给服务器的内容。
Chrome浏览器查找步骤：控制面板-网格-Fetch/XHR-请求的名称-标头/载荷
响应报文的组成:
响应行（状态行)∶协议、HTTP响应状态码、状态信息
响应头:以键值对的格式携带的附加信息，比如Content-Type
空行:分隔响应头，空行之后的是返回给浏览器的资源
响应体:返回的资源

响应状态码：
1xx-信息
2xx-成功
3xx-重定向消息
4xx-客户端错误
5xx-服务端错误

多个表单快捷获取插件serialize

语法：
参数1:const form = document.querySelector( ' .example-form ')
参数2:const data = serialize(form,{ hash: true,empty: true })

serialize()函数的快速收集表单元素的值
参数1:要获取哪个表单的数据
表单元素设置name属性，值会作为对象的属性名建议name属性的值，最好和接口文档参数名一致参数2:配置对象
hash-设置获取数据结构
- true:JS对象（推荐）一般请求体里提交给服务器
- false:查询字符串
empty-设置是否获取空值
- true:获取空值（推荐）数据结构和标签结构一致
- false:不获取空值

解构到同名对象的办法：const { username,password } = data

图片上传到服务器：使用FormData携带图片文件
语法：
const fd = new FormData()
fd.append(参数名，值)

使用XMLHttpRequest语法如下
const xhr = new XMLHttpRequest()
xhr.open('请求方法'，'请求url网址')
xhr.addEventListener( 'loadend',() => {
//响应结果
console.log(xhr.response)
})
xhr .send()

Promise：管理异步任务

// 1．创建Promise对象

        const p = new Promise((resolve, reject) =>{

            // 2．执行异步代码

            setTimeout(() =>{

            // resolve('模拟AJAX请求-成功结果')

            reject(new Error('模拟AJAX请求-失败结果'))

            },2000)

        })

        // 3．获取结果

        p.then(result => {

            console.log(result)

        }).catch(error => {

            console.log(error)

        })

概念:一个Promise对象，必然处于以下几种状态之一
√待定( pending)        :初始状态，既没有被兑现，也没有被拒绝
√已兑现(fulfilled)        :意味着，操作成功完成
√已拒绝(rejected)        :意味着，操作失败
注:Promise对象一旦被兑现/拒绝就是已敲定了，状态无法再被改变

               URLSearchParams转换，并携带到url上，如下：

                const params0bj = new URLSearchParams(config.params)

                const queryString = params0bj.toString()

                //把查询参数字符串，拼接在url?后面

                config.url +=`?${queryString}`

Promise -链式调用【解决 回调函数地狱问题】
概念:依靠then()方法会返回一个新生成的Promise对象特性，继续串联下一环任务，直到结束
结构：new Promise()→.then(回调函数)→新的Promise对象
注：新的对象是用 return 返回出来的 ，案例如下

async函数和await：更简洁的方式写出基于promise的异步行为，而无需刻意地链式调用promise（链式调用的升级版）

async函数和await_捕获错误使用try....catch
语法：
try {
        //要执行的代码
} catch (error) {
        // error接收的是，错误信息
        // try里代码，如果有错误，直接进入这里执行
}
示例：

Promise.all静态方法
语法：