一、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:"目标资源地址"}).then(function (resp){// 处理成功数据console.log(resp.data);}).catch(error => {// 处理失败错误})axios({method:"post", url:"目标资源地址",data:"username=zhangsan"}).then(function (resp){// 处理成功数据console.log(resp.data);}).catch(error => {// 处理失败错误})</script></body></html>下面是对axios请求中各个属性的解释说明
-
method属性：用来设置请求方式的。取值为 get 或者 post。
-
url属性：用来书写请求的资源路径。如果是 get 请求，需要将请求参数拼接到路径的后面，格式为： url?参数名=参数值&参数名2=参数值2。
-
data属性：作为请求体被发送的数据。也就是说如果是 post 请求的话，数据需要作为 data 属性的值。
then() 当中需要传递一个匿名函数，这个匿名函数称为回调函数，意思是该匿名函数在发送请求时不会被调用，而是在成功响应后调用的函数。回调函数中的 resp 参数是对响应的数据进行封装的对象，通过 resp.data 可以获取到响应的数据。
1.4.请求方法别名
为了方便起见， Axios 已经为所有支持的请求方法提供了别名。如下：
get请求： axios.get(url[,config])
delete请求 ： `axios.delete(url[,config])`
head请求 ： `axios.head(url[,config])`
options请求 ： `axios.option(url[,config])`
post请求：`axios.post(url[,data[,config])`
put请求：`axios.put(url[,data[,config])`
patch请求：`axios.patch(url[,data[,config])`
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()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>
