07.axios封装实例

一.简易axios封装-获取省份列表

1. 需求：基于 Promise 和 XHR 封装 myAxios 函数，获取省份列表展示到页面

2. 核心语法：

1. function myAxios(config) {
2.   return new Promise((resolve, reject) => {
3.     // XHR 请求
4.     // 调用成功/失败的处理程序
5.   })
6. }
8. myAxios({
9.   url: '目标资源地址'
10. }).then(result => {
11.    
12. }).catch(error => {
13.    
14. })

复制代码

3. 步骤：

• 定义 myAxios 函数，吸收设置对象，返回 Promise 对象
  
• 发起 XHR 哀求，默认哀求方法为 GET
  
• 调用成功/失败的处理惩罚程序
  
• 利用 myAxios 函数，获取省份列表展示
  

4. 核心代码如下：

1. /**
2. * 目标：封装_简易axios函数_获取省份列表
3. *  1. 定义myAxios函数，接收配置对象，返回Promise对象
4. *  2. 发起XHR请求，默认请求方法为GET
5. *  3. 调用成功/失败的处理程序
6. *  4. 使用myAxios函数，获取省份列表展示
7. */
8. // 1. 定义myAxios函数，接收配置对象，返回Promise对象
9. function myAxios(config) {
10.   return new Promise((resolve, reject) => {
11.     // 2. 发起XHR请求，默认请求方法为GET
12.     const xhr = new XMLHttpRequest()
13.     xhr.open(config.method || 'GET', config.url)
14.     xhr.addEventListener('loadend', () => {
15.       // 3. 调用成功/失败的处理程序
16.       if (xhr.status >= 200 && xhr.status < 300) {
17.         resolve(JSON.parse(xhr.response))
18.       } else {
19.         reject(new Error(xhr.response))
20.       }
21.     })
22.     xhr.send()
23.   })
24. }
26. // 4. 使用myAxios函数，获取省份列表展示
27. myAxios({
28.   url: 'http://hmajax.itheima.net/api/province'
29. }).then(result => {
30.   console.log(result)
31.   document.querySelector('.my-p').innerHTML = result.list.join('<br>')
32. }).catch(error => {
33.   console.log(error)
34.   document.querySelector('.my-p').innerHTML = error.message
35. })

复制代码

二.简易axios封装-获取地域列表

1. 需求：

1. 在上个封装的建议 axios 函数基础上，修改代码支持传递查询参数功能

复制代码

2. 修改步骤：

• myAxios 函数调用后，判断 params 选项
  
• 基于 URLSearchParams 转换查询参数字符串
  
• 利用本身封装的 myAxios 函数显示地域列表
  

3. 核心代码：

1. function myAxios(config) {
2.   return new Promise((resolve, reject) => {
3.     const xhr = new XMLHttpRequest()
4.     // 1. 判断有params选项，携带查询参数
5.     if (config.params) {
6.       // 2. 使用URLSearchParams转换，并携带到url上
7.       const paramsObj = new URLSearchParams(config.params)
8.       const queryString = paramsObj.toString()
9.       // 把查询参数字符串，拼接在url？后面
10.       config.url += `?${queryString}`
11.     }
13.     xhr.open(config.method || 'GET', config.url)
14.     xhr.addEventListener('loadend', () => {
15.       if (xhr.status >= 200 && xhr.status < 300) {
16.         resolve(JSON.parse(xhr.response))
17.       } else {
18.         reject(new Error(xhr.response))
19.       }
20.     })
21.     xhr.send()
22.   })
23. }
25. // 3. 使用myAxios函数，获取地区列表
26. myAxios({
27.   url: 'http://hmajax.itheima.net/api/area',
28.   params: {
29.     pname: '辽宁省',
30.     cname: '大连市'
31.   }
32. }).then(result => {
33.   console.log(result)
34.   document.querySelector('.my-p').innerHTML = result.list.join('<br>')
35. })

复制代码

三.封装_简易axios-注册用户

1. 需求：

1. 修改 myAxios 函数支持传递请求体数据，完成注册用户功能

复制代码

2. 修改步骤：

• myAxios 函数调用后，判断 data 选项
  
• 转换数据范例，在 send 方法中发送
  
• 利用本身封装的 myAxios 函数完成注册用户功能
  

3. 核心代码：

1. function myAxios(config) {
2.   return new Promise((resolve, reject) => {
3.     const xhr = new XMLHttpRequest()
5.     if (config.params) {
6.       const paramsObj = new URLSearchParams(config.params)
7.       const queryString = paramsObj.toString()
8.       config.url += `?${queryString}`
9.     }
10.     xhr.open(config.method || 'GET', config.url)
12.     xhr.addEventListener('loadend', () => {
13.       if (xhr.status >= 200 && xhr.status < 300) {
14.         resolve(JSON.parse(xhr.response))
15.       } else {
16.         reject(new Error(xhr.response))
17.       }
18.     })
19.     // 1. 判断有data选项，携带请求体
20.     if (config.data) {
21.       // 2. 转换数据类型，在send中发送
22.       const jsonStr = JSON.stringify(config.data)
23.       xhr.setRequestHeader('Content-Type', 'application/json')
24.       xhr.send(jsonStr)
25.     } else {
26.       // 如果没有请求体数据，正常的发起请求
27.       xhr.send()
28.     }
29.   })
30. }
32. document.querySelector('.reg-btn').addEventListener('click', () => {
33.   // 3. 使用myAxios函数，完成注册用户
34.   myAxios({
35.     url: 'http://hmajax.itheima.net/api/register',
36.     method: 'POST',
37.     data: {
38.       username: 'itheima999',
39.       password: '666666'
40.     }
41.   }).then(result => {
42.     console.log(result)
43.   }).catch(error => {
44.     console.dir(error)
45.   })
46. })

复制代码

小结

1. 本身封装的 myAxios 怎样设置默认哀求方法 GET?
config.method 判断有值就用，无值用‘GET’方法
2. 外面传入查询参数对象，myAxios 函数内怎样转查询参数字符串?
利用 URLSearchParams 对象转换
3. 外面传入 data 选项，myAxios 函数内怎样携带哀求体参数?
判断外面传入了这个属性，本身转成 JSON 字符串并设置哀求头并在 send 方法中携带

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。