Axios 使用和Ajax原理

HTTP协议

规定了浏览器和服务器返回内容的格式

1.请求报文：浏览器->服务器

例如：以POST发一次请求

• 请求行:对应上面第一行，包括请求方法、URL、协议
• 请求头：2-11行，键值对形式
• 空行
• 请求体：发送的资源

---

2.响应报文：服务器->浏览器

• 响应行：协议、HTTP响应状态码、状态信息
• 响应头：2-14行，键值对形式
• 空行
• 响应体：返回的资源，例如json对象

---

一.什么是ajax

• 使用浏览器的 XMLHttpRequest 对象 与服务器通信的一个交互技术

例如：浏览器网页中，使用 ajax技术(XHR对象)发起获取省份列表数据的请求，服务器代码响应准备好的省份列表数据给前端，前端拿到数据数组以后，展示到网页上面

二.axios使用

axios是一个第三方库，对ajax进行了一个封装，使用起来更加简便

1.axios语法

axios({
  // ...请求选项
}).then(result => {
  // 处理成功数据
}).catch(error => {
  // 处理失败错误
})

例如：1.查询指定网址的数据

 // 3. 基于axios请求地区列表数据
    axios({
        url: '',
        method: 'GET',
        params: {
            
        }
    }).then(result => {
       
    }).catch(error => {
     
    })

三.ajax原理

上面提到，axios是对XMLHttpRequest 对象及api进行的封装

1.语法

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

 

---

2.Promise

Promise 对象用于表示一个异步操作的最终完成(或失败)及其结构值，axios底层请求响应后其实就是利用Promise对象

2.1语法

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

3.内部运作的机制

 

---

四.ajax进阶

1.同步与异步

• 同步：逐行执行，需要等待结果，才继续执行
• 异步：调用后耗时，不阻塞代码继续执行(不必原地等待)，在将来完成后触发回调函数传递结果

2.async 函数和 await

• 在 async 函数内，使用 await 关键字取代 then 函数，等待获取 Promise 对象成功状态的结果值
•  注意：await必须用在async修饰的函数内（await会阻止"异步函数内"代码继续执行，原地等待结果）

3..async 函数和 await捕获错误

try-catch

4.axios拦截器

4.1 请求拦截器：

• 发起请求之前，调用的一个函数，对请求参数进行设置

axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

4.2 响应拦截器：

• 响应回到 then/catch 之前，触发的拦截函数，对响应结果统一处理

axios.interceptors.response.use(function (response) {
  // 2xx 范围内的状态码都会触发该函数。
  return result;
}, function (error) {
  // 超出 2xx 范围的状态码都会触发该函数。
  // 对响应错误做点什么，例如：判断响应状态为 401 代表身份验证失败
  if (error?.response?.status === 401) {
    alert('登录状态过期，请重新登录')
    window.location.href = '../login/index.html'
  }
  return Promise.reject(error);
});