ajax请求问题

发送ajax请求

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

主要内容： - ajax请求的创建 - 回调地狱问题 - promise解决回调地狱问题 - axios请求 - es7中async和await关键字

---

一、创建ajax请求

1.发送ajax请求的步骤

1. 创建ajax对象
2. 配置链接信息
3. 发送ajax请求

2.发送get请求

代码如下（示例）：

let xhr = null
      // 创建ajax对象,同时处理兼容性问题
      if (XMLHttpRequest) {
        xhr = new XMLHttpRequest()
      } else {
        xhr = new ActiveXObject()
      }
      // 配置连接
      xhr.open(
        'get',
        ' http://jx.xuzhixiang.top/ap/api/checkname.php?username=1'
      )
      // 发送请求
      xhr.send()
      xhr.onload = function () {
        // 请求成功
        if (xhr.status == 200) {
          // 服务器返回的数据
          let data = JSON.parse(xhr.responseText)
          console.log(data)
        } else {
          console.log('数据请求失败')
        }
      }

3.发送post请求

代码如下（示例）：

let xhr = null
      if (XMLHttpRequest) {
        xhr = new XMLHttpRequest()
      } else {
        xhr = new ActiveXObject()
      }
      xhr.open('post', 'http://jx.xuzhixiang.top/ap/api/checkname.php')
      // 发送post请求需要配置请求头
      xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
      //在发送post请求时,参数放在请求体中
      xhr.send('username=1')
      // xhr.onload = function () {
      //   if (xhr.status == 200) {
      //     // 接受服务器返回数据
      //     let data = JSON.parse(xhr.responseText)
      //     console.log(data)
      //   }
      // }

      //当ajax状态码发生改变
      xhr.onreadystatechange = function () {
        // 当ajax的状态吗转变为4,且http状态吗以2开头,则请求成功
        if (xhr.readyState == 4 && /^2\d{2}$/.test(xhr.status)) {
          // 接收服务器返回数据
          let data = JSON.parse(xhr.responseText)
          console.log(data)
        }
      }

4.封装ajax请求

function ajax(obj) {
        let { url, type, data, success } = obj
        // 对参数进行处理
        let arr = []
        for (let k in data) {
          arr.push(k + '=' + data[k])
        }
        data = arr.join('&')
        console.log(data)
        // let emm = new URLSearchParams(data)
        // console.log(emm.toString())
        //判断请求类型
        if (type == 'get') {
          // 发送get请求
          let xhr = new XMLHttpRequest()
          xhr.open(type, url + '?' + data)
          xhr.send()
          xhr.onload = function () {
            let result = JSON.parse(xhr.responseText)
            success(result)
          }
        } else if (type == 'post') {
          // 发送post请求
          let xhr = new XMLHttpRequest()
          xhr.open(type, url)
          xhr.setRequestHeader('content-type', 'x-www-form-urlencoded')
          xhr.send(data)
          xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && /^2\d{2}/.test(xhr.status)) {
              let result = JSON.parse(xhr.responseText)
              success(result)
            }
          }
        }
      }

二、回调地狱问题

产生原因:在异步请求过程中,本次请求需要上一次请求的结果作为参数,在多次请求过程中则,产生了回调地狱问题。

---

 ajax({
        // 请求添加用户接口  先注册-->后登录
        url: 'http://jx.xuzhixiang.top/ap/api/reg.php',
        type: 'get',
        data: {
          username: 'lalalal',
          password: '12345',
        },
        success: function (res) {
          // 用户注册成功-->然后请求登录接口
          console.log('用户注册成功')
          ajax({
            // 请求登录接口
            url: 'http://jx.xuzhixiang.top/ap/api/login.php',
            type: 'get',
            username: 'lalalal',
            password: '12345',
            success: function (res) {
              console.log('登录成功')
              console.log(res)
            },
          })
        },
      })

三、promise问题

promise:异步编程的解决方案，旨在解决回调函数的嵌套问题,回调函数嵌套层次过多，会出现回调地狱 嵌套的操作编程链式操作。

---

1.promise介绍

(1) promise内部是由状态变化的，这种状态变化直接决定应该执行成功的回调还是失败的回调
(2) promise内部是有三种状态的，pending resolved rejected，只有两种状态变化 pending->resolved pending->rejected一旦状态改变就不再变化
(3) 异步操作写到 promise 内部， 异步操作成功调用resolve,失败调用reject

2.promise使用

 new Promise((resolve, reject) => {
        ajax({
          url: '接口地址1',
          data: {},
          type: 'get',
          success(res) {
            resolve(res)
          },
        })
      })
        .then((res) => {
          return Promise((resolve, reject) => {
            // 第二次发送请求
            ajax({
              url: '接口地址2',
              type: 'get',
              data: {},
              success(res) {
                // 数据请求成功的回调函数
                resolve(res)
              },
            })
          })
        })
        .then((res) => {
          // 最后一次发送ajax请求
          ajax({
            url: '接口地址3',
            type: 'get',
            data: {},
            sucess(res) {
              console.log(res)
            },
          })
        })

---

(1)使用promise完成红绿灯经典案例

 let li = document.querySelectorAll('ul li')
      let current = 0
      // 变色
      function changeColor(time) {
        return new Promise((resolve, reject) => {
          setTimeout(resolve, time)
        })
      }
      emm()
      function emm() {
        changeColor(2000)
          .then(() => {
            li[current].style.backgroundColor = ''
            li[0].style.backgroundColor = 'red'
            current = 0
            return changeColor(2000)
          })
          .then(() => {
            li[1].style.backgroundColor = 'green'
            li[current].style.backgroundColor = ''
            current = 1
            return changeColor(2000)
          })
          .then(() => {
            li[2].style.backgroundColor = 'yellow'
            li[current].style.backgroundColor = ''
            current = 2
            return changeColor(2000)
          })
          .then(() => {
            emm()
          })

(2)Primise.race()和Promise.all()

let p1 = new Promise(function (res, rej) {
    setTimeout(() => {
        res(1000)
    }, 1000);
})
let p2 = new Promise(function (res, rej) {
    setTimeout(() => {
        res(2000)
    }, 2000);
})
let p3 = new Promise(function (res, rej) {
    setTimeout(() => {
        res(3000)
    }, 3000);
})
/*    let p0 = Promise.race([p1, p2, p3]);
   p0.then(function (r) {
       // p1 p2 p3 谁先完成，接下来就会执行p0.then
       console.log(r);
   }) */
//   Promise.all  一起
let p0 = Promise.all([p1, p2, p3]);
p0.then(function (r) {
    // p1 p2 p3(同时在执行) 都完成，接下来就会执行p0.then
    // r的第一个 元素 就是p1的结果
    //  [1000, 2000, 3000]
    console.log(r);
})

总结：

完结撒花：本文主要介绍ajax的使用方法，和对ajax函数进行封装，
在使用ajax请求的时候经常使用回调函数就会产生回调地狱的问题，可以使用promise进行处理，由于新语法的出现，所以本文介绍内容不被经常使用，但是是在前端面试过程中经常遇到的问题