axios

约 868 字大约 3 分钟

2025-05-02

AJAX的应用

1. get请求 XMLHttpRequest()

// 1.创建ajax对象
let xhr = new XMLHttpRequest()

// 2. 设置请求方式地址
xhr.open('请求方式'，'请求地址')

//3. 发生请求
xhr.send()

// 4. 监听  ajax的步骤状态改变
xhr.onreadystatechang = function( ){ // 此种监听包含5个生命周期
    // 判断步骤 是否到了最后一步1-5  网路是否畅通(状态码)
    
    // 第四步：后端把数返回前段   200-299表示成功
    if(xhr.readyState == 4 && xhr.tatus == 200) {
    // 获取后端数据
    console.log(xhr.responseText)
}
}

 xhr.addEventListener('loadend', () => { // 此种监听是请求结束后触发
          if (xhr.status >= 200 && xhr.status < 300) {
            resolve(JSON.parse(xhr.response))
          } else {
            reject(new Error(xhr.response))
          }
        })

1.1 请求方式

前后端约定的请求模式
get 前端获取后端数据
post 前端主动发送数据到后端
put 上传前端主动发送数据到后端
patch 前端获取后端数据[格式与GET不同]
delete 删除数据

1.2 请求地址

后端提供接口地址
接口说明文档
协议：//服务器地址：端口号/接口地址
http://gotang.cn:8000/

1.3 网路状态码

400 找不到一般情况都是请求地址和请求方式
500 服务器错误
501 权限认证出错
200 成功
304 重定向(服务端提供了其他地址跳转)

2. post请求

// 1. 实例化Axios
let xhr = new XMLHttpRequest()
// 2. 设置请求方式【不可写请求参数】
xhr.open('请求方式'，'请求地址')
// 3. 设置请求头
xhr.setRequestHeader('Content-Type', 'application/json')
xhr.setRequestHeader('Content-Type', 'application/x-ww-form-urlencoded')
// 4. 发送（格式与请求头一样）
xhr.send(data)
xhr.send("name=张三&&age=12")

// 5. 监听
xhr.onreadystatechang = function( ){
    // 判断步骤 是否到了最后一步1-5  网路是否畅通(状态码)
    
    // 第四步：后端把数返回前段   200-299表示成功
    if(xhr.readyState == 4 && xhr.tatus == 200) {
    // 获取后端数据
    console.log(xhr.responseText)
}

3. 常见状态码

400 找不到一般情况都是请求地址和请求方式
500 服务器错误
501 权限认证出错
200 成功
304 重定向(服务端提供了其他地址跳转)

4. 文件上传

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="file">
  <button>上传</button>
  <img src="" alt="">

  <script>
    const int = document.querySelector('input')
    const but = document.querySelector('button')
    const img = document.querySelector('img')


    but.addEventListener('click', () => {
      // 创建fromdate对象
      let file = int.files[0]
      let fd = new FormData()
      fd.append('file', file) // 前面的key后端给

      let xhr = new XMLHttpRequest()

      xhr.open('post', 'http://8.137.157.16:8099/test/upload')

      xhr.send(fd)

      xhr.onreadystatechange = () => {
        // 第四步：后端把数返回前段   200-299表示成功
        if (xhr.readyState == 4 && xhr.status == 200) {
          // 获取后端数据
          let url = JSON.parse(xhr.response).imgUrl

          img.src = 'http://8.137.157.16:8099' + `${url}`

        }
      }
    })

  </script>
</body>

</html>

5. 排错

浏览器控制台找Network 点Fetch/XHR

1看请求地址
2看请求方式和参数
3看请求的状态码
4看后端的返回值

6. 取消监听


dom.removeEventListner('click', 执行函数)

7. ajax与promise结合封装【axios】

ajax与promise封装出来的函数网路请求库

https://unpkg.com/axios/dist/axios.min.js

axios使用

get请求

axios.post('请求地址?请求参数',data).then(function(res){
    // 已经将JSON转
}).catch(function(err){
    
})

post请求

https://unpkg.com/axios/dist/axios.min.js

发送文件

 // 创建fromdate对象
      let file = inp.files[0]
      let fd = new FormData()
      fd.append('file', file) // 前面的key后端给

axios.post('请求地址',fd).then(function(res){
    // 已经将JSON转
}).catch(function(err){
    
})

window 对象

window 顶级对象装了关于DOM 和BOM 相关操作

bom: loction history

dom：节点文档

window 挂属性
window.a = 100

开源网站

github

gitee

npm