【异步请求】异步操作ajax、axios

来自湖南的阿晨

已于 2023-06-30 09:51:45 修改

阅读量375

点赞数 1

分类专栏： AJAX与HTTP 文章标签： ajax Powered by 金山文档

于 2023-02-06 10:55:17 首次发布

本文链接：https://blog.csdn.net/weixin_52479803/article/details/128897173

版权

AJAX与HTTP 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章介绍了客户端与服务器之间的通信，包括URL的作用、Ajax的异步数据交互以及jQuery中简化Ajax的使用。提到了数据交换格式JSON的重要特性，并展示了使用Axios库进行HTTP请求的方法，如GET和POST请求。此外，还讨论了跨域问题及解决策略，如JSONP和CORS，并提及了防抖和节流的概念。

摘要由CSDN通过智能技术生成

客户端与服务器

URL地址：中文叫统一资源定位符，标识互联网上每个资源的唯一存放位置，浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源。

URL地址的组成部分：

客户端与服务器的通信过程：请求 – 处理 – 响应

Ajax概述

Ajax：

全称是 Asynchronous Javascript And XML（异步 JavaScript 和 XML），在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式，就是Ajax

原生实现一个ajax：服务是我自己node起的，大家需要自己起个服务

function ajax(url, callback) {
    // 1、创建XMLHttpRequest对象
    var xmlhttp
    if (window.XMLHttpRequest) {
        //支持XMLHttpRequest
        xmlhttp = new XMLHttpRequest()
    } else {
        //不支持XMLHttpRequest，固定写法
        xmlhttp = new ActiveXObject('Microsoft ......')
    }
    // 2、发送请求
    xmlhttp.open('GET', url, true)
    xmlhttp.send()
    // 3、服务器响应
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
            var obj = JSON.parse(xmlhttp.responseText)
            // console.log(obj)
            callback(obj)
        }
    }
}
ajax('http://127.0.0.1:3000/ac', res => {
    console.log(res)
})

jQ中的ajax：

jQuery 对 XMLHttpRequest 进行了封装，提供了一系列 Ajax 相关的函数，极大地降低了 Ajax 的使用难度

接口

接口的概念：

使用 Ajax 请求数据时，被请求的 URL 地址，就叫做数据接口（简称接口），每个接口必须有请求方式

接口测试工具PostMan：https://www.getpostman.com/downloads/

数据交换格式

数据交换格式：就是服务器端与客户端之间进行数据传输与交换的格式，两种数据交换格式分别是 XML 和 JSON

XML：XML 用的非常少，了解即可

JSON

概念：JSON 就是 Javascript 对象和数组的字符串表示法,本质是字符串

注意：

属性名跟字符串类型的值必须使用双引号包裹

JSON 中不能写注释

JSON 的最外层必须是对象或数组格式

序列化和反序列化：

把数据对象转换为字符串的过程，叫做序列化；调用 JSON.stringify() 函数的操作，叫做 JSON 序列化。

把字符串转换为数据对象的过程，叫做反序列化；调用 JSON.parse() 函数的操作，叫做 JSON 反序列化。

axios

什么是axios：

Axios 是专注于网络数据请求的库

get请求展示：

import axios from 'axios'

//不带参数
axios.get('/api/users').then(response => {
  console.log(response.data)
}).catch(error => {
  console.error(error)
})

//带字符串格式参数
axios.get('/api/users?name=john&age=30').then(response => {
  console.log(response.data)
}).catch(error => {
  console.error(error)
})

//带对象格式参数
axios.get('/api/users', {
  params: {
    name: 'John Doe',
    age: 30
  }
}).then(response => {
  console.log(response.data)
}).catch(error => {
  console.error(error)
})

POST 请求展示：

import axios from 'axios'

//不带参数
axios.post('/api/users').then(response => {
  console.log(response.data)
}).catch(error => {
  console.error(error)
})

//带对象形式的参数
axios.post('/api/users', {
  name: 'John Doe',
  age: 30
}).then(response => {
  console.log(response.data)
}).catch(error => {
  console.error(error)
})

//带FormData 格式的参数
const formData = new FormData()
formData.append('name', 'John Doe')
formData.append('age', 30)

axios.post('/api/users', formData).then(response => {
  console.log(response.data)
}).catch(error => {
  console.error(error)
})

//带JSON 格式的参数
axios.post('/api/users', {
  data: JSON.stringify({
    name: 'John Doe',
    age: 30
  })
}).then(response => {
  console.log(response.data)
}).catch(error => {
  console.error(error)
})

axios的创建实例

当我们从axios模块中导入对象时, 使用的实例是默认的实例，但是后续开发中, 某些配置可能会不太一样；比如某些请求需要使用特定的baseURL或者timeout等，这个时候, 我们就可以创建新的实例, 并且传入属于该实例的配置信息

请求和响应拦截器

拦截每次请求和响应

axios.interceptors.request.use(请求成功拦截, 请求失败拦截)

axios.interceptors.response.use(响应成功拦截, 响应失败拦截)

在 Axios 请求拦截器中动态配置 token

import axios from 'axios'

// 在请求头中添加 token
const addToken = config => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
}

// 创建 Axios 实例
const instance = axios.create({
  baseURL: 'https://api.example.com',
  headers: {'Content-Type': 'application/json'},
  timeout: 5000
})

// 添加请求拦截器
instance.interceptors.request.use(addToken)

// 发送请求
instance.get('/api/users')
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.error(error)
  })