当前位置：首页 > news >正文

前端前置知识

news 2025/2/10 22:38:16

一、Axios

1.1.Axios概述

AJAX 是一种技术和方法论，允许网页在不重新加载整个页面的情况下，与服务器进行异步通信并更新页面内容。AJAX 本质上并不是某个具体的工具或库，而是描述如何使用 JavaScript 与服务器进行交互的方式。XMLHttpRequest 是浏览器提供的 JavaScript API，对 AJAX 这种技术进行了具体实现。
Axios 是一个封装了 XMLHttpRequest 的库，提供了更加简化的 API，使用起来非常便捷。

1.2.认识URL

URL翻译过来叫统一资源定位符，简称网址，用于定位网络中的资源。资源指的是：网页，图片，数据，视频，音频等等。URL 的组成如下：

http 协议：叫超文本传输协议，规定了浏览器和服务器传递数据的格式。
域名：标记服务器在互联网当中的地址。
资源路径：一个服务器内有多个资源，用于标识你要访问的资源具体的位置。

1.3.axios的使用

  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AJAX概念和axios使用</title></head><body><!-- 1. 引入axios库 --><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>// 2.使用axios函数axios({method:"get", url:"目标资源地址" // 可以在URL里携带参数params: {  // 也是在URL里携带参数userId: 1 }}).then(function (resp){// 处理成功数据console.log(resp.data);}).catch(error => {// 处理失败错误})axios({method:"post", url:"目标资源地址", // 可以在URL里携带参数params: { // 这里的参数会被放在URL里userId: 1 }data:"username=zhangsan" // 这里的参数会被放在请求体里}).then(function (resp){// 处理成功数据console.log(resp.data);}).catch(error => {// 处理失败错误})</script></body></html>

当URL和params里同时传递了同名参数的时候，params里的参数会覆盖URL里的参数。

1.4.请求方法别名

为了方便起见， Axios 已经为所有支持的请求方法提供了别名。如下：

get请求

axios.get('/products', {params: {goodsId: 1001,category: 'electronics'}
}).then(response => {console.log('Product data:', response.data);}).catch(error => {console.log('Error fetching product data:', error);});

post请求：

axios.post('/users/register', { // 参数放在请求体里username: 'newuser',password: 'password123',email: 'newuser@example.com'
}, {params: { // 参数放在URL里source: 'mobileApp',requestType: 'signup'}
})
.then(response => {console.log('Registration successful:', response.data);
})
.catch(error => {console.log('Error during registration:', error);
});

put请求：

axios.put('/products/1001', {name: 'New Product Name',price: 19.99,description: 'Updated product description.'
}, {params: {category: 'electronics',updateSource: 'website'}
})
.then(response => {console.log('Product updated:', response.data);
})
.catch(error => {console.log('Error updating product:', error);
});

delete请求

axios.delete('/users/123', {params: {reason: 'inactive'}
})
.then(response => {console.log('User deleted:', response.data);
})
.catch(error => {console.log(error);
});

尽管技术上 GET 和 DELETE 请求可以携带请求体，但由于它们的作用，这两个请求方法通常不携带请求体，而是通过 URL 来传递参数。

1.4.async和await

axios的请求默认都是异步的，后面的操作可能需要依赖前面异步请求的结果，这种情况下就需要使用 async 和 await 语法用于等待异步操作完成。

// 1. 使用async修饰函数，这样才能在函数内使用await
async function getData() {// 2. 每个await都会等待后面的异步操作完成之后，才会继续往下执行后const pObj = await axios({url: 'http://hmajax.itheima.net/api/province'})const pname = pObj.data.list[0]// 需要前面这个异步操作结果中的pname作为参数const cObj = await axios({url: 'http://hmajax.itheima.net/api/city', params: { pname }})const cname = cObj.data.list[0]// 需要前面这个异步操作结果中的cname作为参数const aObj = await axios({url: 'http://hmajax.itheima.net/api/area', params: { pname, cname }})const areaName = aObj.data.list[0]
}getData()

axios请求完后会返回一个Promise对象，这个对象的data属性就是响应回来的数据。

1.5.axios二次封装

在公司里面，针对 axios 肯定会进行二次封装，二次封装的好处在于提高代码的可维护性和可复用性。比如，统一管理请求后端接口的 URL、统一处理请求和响应。

// 1.引入axios
import axios from 'axios'// 2.创建axios对象
const instance = axios.create({baseURL: 'http://smart-shop.itheima.net/index.php?s=/api'
})// 3.配置请求拦截器
instance.interceptors.request.use(function (config) {return config
}, function (error) {// 对请求错误做些什么return Promise.reject(error)
})// 4.配置响应拦截器
instance.interceptors.response.use(function (response) {const res = response.datareturn res
}, function (error) {return Promise.reject(error)
})// 3.导出配置好的axios对象
export default instance

1.6.api解耦

实际开发中，一般会在项目中创建一个 api 文件夹，然后把项目中的 axios 请求单独封装到文件夹里的对应 js 文件里，这样在项目中就能够很方便的调用这些请求。api的解耦，进一步提高了代码的可复用性和可维护性。

api 文件夹下的 js 文件

// 1.导入封装好的axios对象
import request from '@/utils/request'// 2.使用axios对象请求后端，获取数据
export const getUserInfoDetail = () => {return request.get('/user/info')
}

在页面中调用封装好的 axios 请求

// 以Vue组件对应的页面为例
<template>
</template><script>
// 1.引入封装好的axios请求
import { getUserInfoDetail } from '@/api/user.js'
export default {name: 'UserPage',methods: {async getUserInfoDetail () {// 2.调用axios请求获取数据const { data: { userInfo } } = await getUserInfoDetail()this.detail = userInfoconsole.log(this.detail)}}
}
</script><style>
</style>

查看全文

http://www.mrgr.cn/news/83268.html