• axios

    文章基于尚硅谷

    HTTP

    1. 前后台交互的基本过程

    在这里插入图片描述

     

    1. 前后应用从浏览器端向服务器发送HTTP请求(请求报文)
    2. 后台服务器接收到请求后, 调度服务器应用处理请求, 向浏览器端返回HTTP响应(响应报文)
    3. 浏览器端接收到响应, 解析显示响应体/调用监视回调

    HTTP请求报文

    请求行:

    请求方式/url
    常用请求方式get post delete put  

    POST /login

    多个请求头

    Host: www.baidu.com
    Cookie: BAIDUID=AD3B0FA706E; BIDUPSID=AD3B0FA706;
    Content-Type: application/x-www-form-urlencoded 或者application/json

    请求体

    username=tom&pwd=123   urlencoded
    {"username": "tom", "pwd": 123}   json

    HTTP 响应报文

    响应状态行:

    status

    statusText

    多个响应头

    Content-Type: text/html;charset=utf-8
    Set-Cookie: BD_CK_SAM=1;path=/

    响应体

    html 文本/json 文本/js/css/图片...

    post 请求体参数格式

    1.Content-Type: application/x-www-form-urlencoded;charset=utf-8
    用于键值对参数，参数的键值用=连接, 参数之间用&连接
    例如: name=%E5%B0%8F%E6%98%8E&age=12
    2.Content-Type: application/json;charset=utf-8
    用于 json 字符串参数
    例如: {"name": "%E5%B0%8F%E6%98%8E", "age": 12}
    3.Content-Type: multipart/form-data
    用于文件上传请求

     常见的响应状态码

    200    OK                     请求成功。一般用于GET与POST请求
    201 Created                已创建。成功请求并创建了新的资源
    401 Unauthorized           未授权/请求要求用户的身份认证
    404 Not Found              服务器无法根据客户端的请求找到资源
    500 Internal Server Error  服务器内部错误，无法完成请求

    不同类型的请求及其作用

    1. 1. GET: 从服务器端读取数据
    2. 2. POST: 向服务器端添加新数据
    3. 3. PUT: 更新服务器端已经数据
    4. 4. DELETE: 删除服务器端数据

    API 的分类

    REST API: restful （Representational State Transfer (资源)表现层状态转化）
    (1) 发送请求进行CRUD 哪个操作由请求方式来决定
    (2) 同一个请求路径可以进行多个操作
    (3) 请求方式会用到GET/POST/PUT/DELETE
    非REST API: restless
    (1) 请求方式不决定请求的CRUD 操作
    (2) 一个请求路径只对应一个操作
    (3) 一般只有GET/POST

    测试: 可以使用json-server快速搭建模拟的rest api 接口

    2.json-server使用

    npm install -g json-server

    目标根目录下创建数据库 json 文件:db.json

    1. {
    2. 	"posts": [
    3. 		{ "id": 1, "title": "json-server", "author": "typicode" },
    4. 		{ "id": 2, "title": "json-server2", "author": "typicode" }
    5. 	],
    6. 	"comments": [
    7. 		{ "id": 1, "body": "some comment", "postId": 1 }
    8. 	],
    9. 	"profile": { "name": "typicode" }
    10. }

    启动服务器执行命令

     json-server --watch db.json

    3 xhr的理解和使用

    1. 使用 XMLHttpRequest (XHR) 对象可以与服务器交互 , 也就是发送 ajax 请求
    2. 前端可以获取到数据，而无需让整个的页面刷新。
    3. 这使得 Web 页面可以只更新页面的局部，而不影响用户的操作。

    区别一般 http 请求与 ajax 请求

    1. ajax 请求是一种特别的 http 请求
    2. 对服务器端来说 , 没有任何区别 , 区别在浏览器端
    3. 浏览器端发请求 : 只有 XHR 或 fetch 发出的才是 ajax 请求 , 其它所有的都是
    非 ajax 请求
    4. 浏览器端接收到响应
    (1) 一般请求 : 浏览器一般会直接显示响应体数据 , 也就是我们常说的刷新 /
    跳转页面
    (2) ajax 请求 : 浏览器不会对界面进行任何更新操作 , 只是调用监视的回调
    函数并传入响应相关数据

    xhrAPI

    • 1. XMLHttpRequest(): 创建 XHR 对象的构造函数
    • 2. status: 响应状态码值, 比如 200, 404
    • 3. statusText: 响应状态文本
    • 4. readyState: 标识请求状态的只读属性
            0: 初始
            1: open()之后
            2: send()之后
            3: 请求中
            4: 请求完成
    • 5. onreadystatechange: 绑定 readyState 改变的监听
    • 6. responseType: 指定响应数据类型, 如果是'json', 得到响应后自动解析响应体数据
    • 7. response: 响应体数据, 类型取决于 responseType 的指定
    • 8. timeout: 指定请求超时时间, 默认为 0 代表没有限制
    • 9. ontimeout: 绑定超时的监听
    • 10. onerror: 绑定请求网络错误的监听
    • 11. open(): 初始化一个请求, 参数为: (method, url[, async])
    • 12. send(data): 发送请求
    • 13. abort(): 中断请求
    • 14. getResponseHeader(name): 获取指定名称的响应头值
    • 15. getAllResponseHeaders(): 获取所有响应头组成的字符串
    • 16. setRequestHeader(name, value): 设置请求头

    4 使用XHR 封装一个简单版axios

    axios特点

    • 函数的返回值为promise, 成功的结果为response, 失败的结果为error
    • 能处理多种类型的请求: GET/POST/PUT/DELETE
    • 函数的参数为一个配置对象 
      1. {
      2. 	url: '', // 请求地址
      3. 	method: '', // 请求方式GET/POST/PUT/DELETE
      4. 	params: {}, // GET/DELETE 请求的 query 参数
      5. 	data: {}, // POST/PUT 请求的请求体参数
      6. }

    • 响应 json数据 自动解析为 js的对象/数组

     简单axios编码实现

    1. function axios({
    2.             url,
    3.             methed = 'GET',
    4.             params = {},
    5.             data = {}
    6.         }) {
    7.             //返回一个premise对象
    8.             return new Promise((resolve, reject) => {
    9.                 // 执行异步Ajax请求
    10.  
    11.                 //处理method(转为大写)
    12.                 methed = methed.toUpperCase()
    13.  
    14.                 /* 
    15.                 {
    16.                     id: 1,
    17.                     xxx:'abc'
    18.                 }
    19.                 */
    20.                 //处理query参数(拼接到url上)  id=1&xxx=abc
    21.                 let queryString = ''
    22.                 Object.keys(params).forEach(key => {
    23.                     queryString += `${key}=${params[key]}&`
    24.                 })
    25.                 if (queryString) {//id=1&xxx=abc&
    26.                     //去除最后的&
    27.                     queryString = queryString.substring(0, queryString.length - 1)
    28.                     //拼接到url上
    29.                     url += '?' + queryString
    30.                 }
    31.  
    32.  
    33.                 //创建xhr对象
    34.                 const request = new XMLHttpRequest()
    35.                 //打开连接(初始化请求)
    36.                 request.open(methed, url, true)
    37.  
    38.                 //绑定状态改变的监听
    39.                 request.onreadystatechange = function () {
    40.                     //如果请求没有完成，直接结束
    41.                     if (request.readyState !== 4) {
    42.                         return
    43.                     }
    44.                     //如果响应状态码在200到299之间代表成功 否则失败
    45.                     const { status, statusText } = request
    46.                     //如果请求成功调用resolve()
    47.                     if (status >= 200 & status <= 299) {
    48.                         //准备结果对象
    49.                         const response = {
    50.                             data: JSON.parse(request.response),//响应json数据自动解析为js的对象/数组
    51.                             status,
    52.                             statusText
    53.                         }
    54.                         resolve(response)
    55.                     } else {//如果请求失败调用reject()
    56.                         reject(new Error('request error status is ' + status))
    57.                     }
    58.  
    59.                 }
    60.  
    61.                 //发送请求
    62.                 if (methed === 'GET' || methed === 'DELETE') {
    63.                     request.send()
    64.                 } else if (methed === 'POST' || methed === 'PUT') {
    65.  
    66.                     request.setRequestHeader('Content-Type', 'application/json;charset=utf-8')//告诉服务器请求体的格式是json
    67.                     request.send(JSON.stringify(data))//发送json格式请求体参数  send异步
    68.                 }
    69.  
    70.             })
    71.         }

    使用测试

    1. // 1. GET请求：从服务器端获取数据
    2. function testGet() {
    3.   axios({
    4.     url: 'http://localhost:3000/posts',
    5.     method: 'GET',
    6.     params:{
    7.       id: 1,
    8.       xxx: 'abc'
    9.     }
    10.   }).then(
    11.     response => {
    12.       console.log(response)
    13.     },
    14.     error => {
    15.       alert(error.message)
    16.     }
    17.   )
    18. }
    19.  
    20. // 2. POST请求：向服务器端添加数据
    21. function testPost() {
    22.   axios({
    23.     url: 'http://localhost:3000/posts',
    24.     method: 'POST',
    25.     data: {
    26.       "title": "json-server_post",
    27.       "author": "typicode_post"
    28.     }
    29.   }).then(
    30.     response => {
    31.       console.log(response)
    32.     },
    33.     error => {
    34.       alert(error.message)
    35.     }
    36.   )
    37. }
    38. // 3. PUT请求：服务器更新数据
    39. function testPut() {
    40.   axios({
    41.     url: 'http://localhost:3000/posts/1',
    42.     method: 'PUT',
    43.     data: {
    44.       "title": "json-server_put",
    45.       "author": "typicode_put"
    46.     }
    47.   }).then(
    48.     response => {
    49.       console.log(response)
    50.     },
    51.     error => {
    52.       alert(error.message)
    53.     }
    54.   )
    55. }
    56.  
    57. // 3. DELETE请求：服务器删除数据
    58. function testDelete() {
    59.   axios({
    60.     url: 'http://localhost:3000/posts/2',
    61.     method: 'delete'
    62.   }).then(
    63.     response => {
    64.       console.log(response)
    65.     },
    66.     error => {
    67.       alert(error.message)
    68.     }
    69.   )
    70. }

    5 axios的理解和使用

    特点

    1. 基于promise的封装XHR的异步ajax请求库
    2. 浏览器端/node端都可以使用
    3. 支持请求／响应拦截器
    4. 支持请求取消
    5. 请求/响应数据转换
    6. 批量发送多个请求

    常用语法

    1. axios(config): 通用/最本质的发任意类型请求的方式
    2. axios(url[, config]): 可以只指定url发get请求
    3. axios.request(config): 等同于axios(config)
    4. axios.get(url[, config]): 发get请求
    5. axios.delete(url[, config]): 发delete请求
    6. axios.post(url[, data, config]): 发post请求
    7. axios.put(url[, data, config]): 发put请求
    8.  
    9. axios.defaults.xxx: 请求的默认全局配置
    10. axios.interceptors.request.use(): 添加请求拦截器
    11. axios.interceptors.response.use(): 添加响应拦截器
    12.  
    13. axios.create([config]): 创建一个新的axios(它没有下面的功能)
    14.  
    15. axios.Cancel(): 用于创建取消请求的错误对象
    16. axios.CancelToken(): 用于创建取消请求的token对象
    17. axios.isCancel(): 是否是一个取消请求的错误
    18. axios.all(promises): 用于批量执行多个异步请求
    19. axios.spread(): 用来指定接收所有成功数据的回调函数的方法

    在这里插入图片描述

     难点语法的理解和使用

    axios.create(config)

    1. 根据指定配置创建一个新的 axios, 也就就每个新 axios 都有自己的配置
    2. 新 axios 只是没有取消请求和批量发请求的方法 , 其它所有语法都是一致的
    3. 为什么要设计这个语法 ?
    (1) 需求 : 项目中有部分接口需要的配置与另一部分接口需要的配置不太一
    样 , 如何处理
    (2) 解决 : 创建 2 个新 axios, 每个都有自己特有的配置 , 分别应用到不同要
    求的接口请求中

    实例

     

    拦截器函数/ajax 请求/请求的回调函数的调用顺序

    1. 说明 : 调用 axios() 并不是立即发送 ajax 请求 , 而是需要经历一个较长的流程
    2. 流程 : 请求拦截器 2 => 请求拦截器 1 => 发 ajax 请求 => 响应拦截器 1 => 响
    应拦截器 2 => 请求的回调
    3. 注意 : 此流程是通过 promise 串连起来的 , 请求拦截器传递的是 config, 响应
    拦截器传递的是 response 
    1. // 添加两个请求拦截器(回调函数)
    2. axios.interceptors.request.use(
    3.   config => {
    4.     console.log('request interceptor1 onResolved()') // -----------2
    5.     return config
    6.   },
    7.   error => {
    8.     console.log('request interceptor1 onRejected()')
    9.     return Promise.reject(error)
    10.   }
    11. )
    12.  
    13. axios.interceptors.request.use(
    14.   config => {
    15.     console.log('request interceptor2 onResolved()') // -----------1
    16.     return config
    17.   },
    18.   error => {
    19.     console.log('request interceptor2 onRejected()')
    20.     return Promise.reject(error)
    21.   }
    22. )
    23.  
    24. // 添加两个响应拦截器
    25. axios.interceptors.response.use(
    26.   resopnse => {
    27.     console.log('response interceptor1 onResolved()') // -----------3
    28.     return resopnse
    29.   },
    30.   error => {
    31.     console.log('response interceptor1 onRejected()')
    32.     return Promise.reject(error)
    33.   }
    34. )
    35.  
    36. axios.interceptors.response.use(
    37.   resopnse => {
    38.     console.log('response interceptor2 onResolved()') // -----------4
    39.     return resopnse
    40.   },
    41.   error => {
    42.     console.log('response interceptor2 onRejected()')
    43.     return Promise.reject(error)
    44.   }
    45. )
    46.  
    47. axios.get('http://localhost:3000/posts')
    48.   .then(response => {
    49.     console.log('data', response.data) //data Array(4) -------------5
    50.   })
    51.   .catch(error => {
    52.     cosole.log('error', error.message)
    53.   })
    54.  
    55. // request interceptor2 onResolved()
    56. // request interceptor1 onResolved()
    57. // response interceptor1 onResolved()
    58. // response interceptor2 onResolved()
    59. // data Array(4)

    取消请求

    1. 基本流程
    配置 cancelToken 对象
    缓存用于取消请求的 cancel 函数
    在后面特定时机调用 cancel 函数取消请求
    在错误回调中判断如果 error 是 cancel, 做相应处理
    2. 实现功能
    点击按钮 , 取消某个正在请求中的请求
    在请求一个接口前 , 取消前面一个未完成的请求
    server.js 
    1. const express = require('express')
    2. const cors = require('cors')
    3.  
    4. const app = express()
    5.  
    6. // 使用cors, 允许跨域
    7. app.use(cors())
    8. // 能解析urlencode格式的post请求体参数
    9. app.use(express.urlencoded({ extended: false }))
    10. // 能解析json格式的请求体参数
    11. app.use(express.json())
    12.  
    13. app.get('/products1', (req, res) => {
    14.  
    15.   setTimeout(() => {
    16.     res.send([
    17.       { id: 1, name: 'product1.1' },
    18.       { id: 2, name: 'product1.2' },
    19.       { id: 3, name: 'product1.3' }
    20.     ])
    21.   }, 1000 + Math.random() * 2000);
    22.  
    23. })
    24.  
    25. app.get('/products2', (req, res) => {
    26.  
    27.   setTimeout(() => {
    28.     res.send([{
    29.       id: 1,
    30.       name: 'product2.1'
    31.     },
    32.     {
    33.       id: 2,
    34.       name: 'product2.2'
    35.     },
    36.     {
    37.       id: 3,
    38.       name: 'product2.3'
    39.     }
    40.     ])
    41.   }, 1000 + Math.random() * 2000);
    42.  
    43. })
    44.  
    45. app.listen(4000, () => {
    46.   console.log('server app start on port 4000')
    47. })
    1. // 添加请求拦截器
    2. axios.interceptors.request.use((config) => { // 只写一个成功的回调
    3.   // 在准备发请求前，取消未完成的请求
    4.   if (typeof cancel === 'function'){
    5.     cancel('取消请求')
    6.   }
    7.   // 添加一个cancelToken的配置
    8.   config.cancelToken = new axios.CancelToken(function executor(c){ // c是用于取消当前请求的函数
    9.       // 保存取消函数，用于之后可能需要取消当前请求
    10.       cancel = c;
    11.     })
    12.     return config
    13. })
    14.  
    15. // 添加响应拦截器
    16. axios.interceptors.response.use(
    17.   response => { // 成功的回调
    18.     cancel = null 
    19.     return response
    20.   },
    21.   error => { // 失败的回调
    22. //在错误回调中判断如果 error 是 cancel, 做相应处理 解决上一次请求异步回调清空cancel的问题
    23.  
    24.     if (axios.isCancel(error)){ // 请求取消的错误   
    25.         console.log('请求取消的错误', error.message)
    26.         // 中断promise链
    27.         return new Promise(() => {})
    28.     }else{ // 请求出错了
    29.       cancel = null 
    30.       // 将错误向下传递 
    31.       // throw error
    32.       return Promise.reject(error)
    33.     }
    34.   }
    35. )
    36.  
    37. let cancel // 用于保存取消请求的函数
    38. function getProducts1() {
    39.   axios({
    40.     url: 'http://localhost:4000/products1'
    41.   }).then(
    42.     response => {
    43.       console.log('请求1成功了', response.data)
    44.     },
    45.     error => { // 只用处理请求失败的情况，取消请求的错误不用处理
    46.       console.log('请求1失败了', error.message, error) 
    47.     }
    48.   )
    49. }
    50.  
    51. function getProducts2() {
    52.   axios({
    53.       url: 'http://localhost:4000/products2'
    54.   }).then(
    55.     response => {
    56.       console.log('请求2成功了', response.data)
    57.     },
    58.     error => {
    59.       console.log('请求2失败了', error.message, error) 
    60.     }
    61.   )
    62. }
    63. function cancelReq() {
    64.   if (typeof cancel === 'function'){
    65.     cancel('强制取消请求')
    66.   } else {
    67.     console.log('没有可取消的请求')
    68.   }
    69. }

  • 相关阅读:
    Gradient Descent
    Java设计模式
    云计算到底什么，十个问答告诉您
    nodejs+vue 网上招聘系统elementui
    设计模式11、享元模式Flyweight
    java计算机毕业设计汽车美容管理（附源码、数据库）
    基于TMS320F28377D开发板的DSP CLA算法案例开发手册
    VSCode创建VUE前端项目
    C++ Reference: Standard C++ Library reference: Containers: list: list: cend
    如厕神器，阿里大神手打的Spring全家桶脑图（spring+MVC+Boot+Cloud）
  • 原文地址：https://blog.csdn.net/qq_60587956/article/details/126054966