学完Ajax阶段了，但这次考试比以往稍微晚了些，可能知识点比较零碎吧，例行总结一下，也顺便查漏补缺，注意：因为时间问题，以下使用的接口可能已经失效，请根据实际需求更换。

原生Ajax实现异步请求

AJAX 是异步的 JavaScript 和 XML（Asynchronous JavaScript And XML）。这个异步简单点说就是可以在不重新刷新页面的情况下与服务器通信，交换数据，更新页面。

原生JS能实现这个功能主要是依靠了XMLHttpRequest对象，这是JS内置的一个对象，使用起来较为麻烦，代码如下，相关功能已注释。

<script>
    /* 实例化XHR对象 */
    let xhr = new XMLHttpRequest();
    /* 设置请求方式与请求URL */
    xhr.open("get", "http://ajax-api.itheima.net/api/weather?city=深圳");
    /* 原生JS需要设置发送数据的格式，用于告知服务器 */
    xhr.setRequestHeader("content-type", "application/json");
    /* 发送请求，get不需要参数 */
    /* 只有post请求需要填写，有一个注意点，需要使用JSON.stringify转字符串 */
    xhr.send();
    /* 接收服务器的响应，xhr.response是响应的内容，响应回来的内容如果是对象需要使用JSON.parse转对象 */
    xhr.onload = function () {
        let data = JSON.parse(xhr.response);
        console.log(data);
    }
</script>

可见原生的Ajax请求起来非常的麻烦，所以又学习了axios，这是前端目前主流的请求库，写法方便。

Axios的使用

对于请求方式其实axios提供了拆分写法也提供了综合的写法，所以这里就记录综合的写法，那就是配置对象写法，使用也方便。

<script>
/* {
​    url:'接口地址',
​    method: '请求方式',
    // get请求时发送的数据
​    params:{key:value,key:value},
    // post请求时发送的数据
​    data:{key:value,key:value},
} */
/* 用axios写原生的方式就只需要这样，post请求同理 */
axios({
    url: "http://ajax-api.itheima.net/api/weather",
    params: {
        city: "深圳"
    },
    methods: "get"
}).then(function (res) {
    console.log(res);
})
</script>

上面的使用还有一个疑问，.then是什么东西?

Promise的概念与使用

概念: Promise是一个内置对象，内部执行指定异步任务（也叫耗时任务），并在成功或失败时执行预定的处理代码，通过.then处理成功之后的操作，.catch处理失败。

使用: Promise实例化时必须传递一个回调函数，如下

<script>
new Promise(function(resolve, reject){
​    let 结果 = 这里执行异步操作
​    if(成功){
​        resolve(结果)
​    }else{
​        reject(失败)
​    }
}).then(function(data){
​    // resolve会跳到then里执行，data就是resolve()传递过来的数据
}).catch(function(err){
​    // reject会跳到catch里执行，err就是reject()传递过来的错误
})
</script>

注意，成功和失败不会同时存在，并且.then前面一定要是Promise对象，因为.then是需要等待前面的方法执行完后再执行then()内部的程序，这样就避免了，数据没获取到等的问题。

当然，axios都已经配置好了，比如axios返回的其实就是Promise对象，不需要我们实例化，我们可以直接使用.then去执行成功后的方法。

扩展特点与不常用的方法（了解一下即可）

特点: Promise对象的状态不受外界影响。其中有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败），并且只有异步操作的结果可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。

Promise.all: 接收的参数是Promise对象数组，只有等待数组中所有promise的异步任务都执行完毕时才执行.then，如果有一个出错则catch返回第1个失败的reject错误。

Promise.race: 和Promise.all一样接收的参数是Promise对象数组，但.then执行的是最先完成异步任务的Promise对象，race是赛跑的意思。

如何解决回调地狱的问题

问题: 当我们需要前一个数据请求回来时再发送一个请求的时候，以此类推，发送多次就会产生回调地狱，我们来模拟一下。

上面看起来好像还不是很明显，但只要回调的次数够多就会特别难维护，同时还发现代码重复率非常高，并且axios函数内部返回的数据就是Promise对象，因此我们可以利用Promise对象的特点对这个请求封装改进一下，代码会形成竖着的链式调用。

虽然上面解决了回调地狱，但感觉这种链式调用好像还是不够简洁，于是，又引进了async函数与await的解决办法。

async顾名思义就是异步的意思，用于声明一个函数是异步的。其返回的都是一个Promise对象，可以使用then方法添加回调函数，而await是等待的意思，一旦遇到await就会先等到触发的异步操作完成，再接着执行函数体后面的语句。

注意: await只能使用在async函数中，因此使用await时候 函数前面必须加上async关键字。

最后

本来是想Ajax和Node一起总结的，因为这次考试是等两个阶段一起学完才考的，结果发现光是Ajax的内容就很多，我复习和整理思绪都花费了很多时间，所以才打算分开总结，这次总结发现自己对那些语法和英文单词都还是不太熟练，得多花时间敲敲了。