从XHR、Promise到手动封装简易axios

AJAX原理:

利用window的XMLHttpRequest对象与服务器进行通信的技术

axios概念:

axios 是对 XHR 相关代码进行了封装，让我们只关心传递的接口参数

---

XHR

学习XHR( XMLHttpRequest )的原因:

1-交互简便: 如果静态网站与服务器交互的地方只有一到两处, 且我们希望缩小静态网站的体积, 我们此时就不需要引入axios, 而是利用XHR几行代码就可以进行简便交互了

2-理解axios原理: 通过对XHR的学习, 我们可以对axios有一个很好的理解.

XHR的使用方式:

基础使用:

// 1, 创建XMLHttpRequest对象
const xhr = new XMLHttpRequest()
// 2, 配置请求方法和URL地址
xhr.open('请求方法', '请求url网址')
// 3, 监听 loadend 事件, 接收响应结果
xhr.addEventListener('loadend', () => {
  // 响应结果
  console.log(xhr.response)
})
xhr.send()

携带查询参数: 在调用 open 方法的时候，在 url? 后面按照指定格式拼接参数名和值

xhr.open('GET', '<http://hmajax.itheima.net/api/city?pname=辽宁省>')

如何数据提交:

1- 设定XHR

2- 设定提交的数据类型

const xhr = new XMLHttpRequest()
xhr.open('请求方法', '请求url网址')
xhr.addEventListener('loadend', () => {
  console.log(xhr.response)
})

// 1. 告诉服务器，我传递的内容类型，是 JSON 字符串
xhr.setRequestHeader('Content-Type', 'application/json')
// 2. 准备数据并转成 JSON 字符串
const user = { username: 'itheima007', password: '7654321' }
const userStr = JSON.stringify(user)
// 3. 发送请求体数据
xhr.send(userStr)

---

Promise

Promise概念:

管理一个异步操作最终状态和结果的对象

Promise好处:

逻辑清晰: 异步操作的成功和失败状态会调用对应处理函数

了解 axios 函数内部运作的机制

语法:

// 1. 创建 Promise 对象
const p = new Promise((resolve, reject) => {
 // 2. 执行异步任务-并传递结果
 // 成功调用: resolve(值) 触发 then() 执行
 // 失败调用: reject(值) 触发 catch() 执行
})
// 3. 接收结果
p.then(result => {
 // 成功
}).catch(error => {
 // 失败
})

状态:

Promise对象的状态改变后, 会调用相应的回调函数

待定（pending）：初始状态，既没有被兑现，也没有被拒绝

已兑现（fulfilled）：操作成功完成

已拒绝（rejected）：操作失败

// 1. 创建Promise对象（pending-待定状态）
const p = new Promise((resolve, reject) => {
  // Promise对象创建时，这里的代码都会执行了
  // 2. 执行异步代码
  setTimeout(() => {
    // resolve() => 'fulfilled状态-已兑现' => then()
    resolve('模拟AJAX请求-成功结果')
    // reject() => 'rejected状态-已拒绝' => catch()
    reject(new Error('模拟AJAX请求-失败结果'))
  }, 2000)
})
console.log(p)

// 3. 获取结果
p.then(result => {
  console.log(result)
}).catch(error => {
  console.log(error)
})

输出结果:

Promise
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: "模拟AJAX请求-成功结果"

---

封装简易axios

需求：基于 Promise 和 XHR 封装 myAxios 函数

语法:

实现步骤:

1. 定义 myAxios 函数，接收配置对象，返回 Promise 对象
2. 发起 XHR 请求，默认请求方法为 GET
3. 调用成功/失败的处理程序
4. 使用 myAxios 函数

function myAxios(config) {
  return new Promise((resolve, reject) => {
    // XHR 请求
    // 调用成功/失败的处理程序
  })
}

myAxios({
  url: '目标资源地址'
}).then(result => {
    
}).catch(error => {
    
})

案例:

// 1. 定义myAxios函数，接收配置对象，返回Promise对象
function myAxios(config) {
  return new Promise((resolve, reject) => {
    // 2. 发起XHR请求，默认请求方法为GET
    const xhr = new XMLHttpRequest()
    xhr.open(config.method || 'GET', config.url)
    xhr.addEventListener('loadend', () => {
      // 3. 调用成功/失败的处理程序
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(JSON.parse(xhr.response))
      } else {
        reject(new Error(xhr.response))
      }
    })
    xhr.send()
  })
}

// 4. 使用myAxios函数，获取省份列表展示
myAxios({
  url: '<http://hmajax.itheima.net/api/province>'
}).then(result => {
  console.log(result)
  document.querySelector('.my-p').innerHTML = result.list.join('<br>')
}).catch(error => {
  console.log(error)
  document.querySelector('.my-p').innerHTML = error.message
})

参考: AJAX-Day01-01.AJAX入门与axios使用_哔哩哔哩_bilibili