学习自哔哩哔哩上的“刘老师教编程”,具体学习的网站为:11.Axios网络请求_哔哩哔哩_bilibili,以下是看课后做的笔记,仅供参考。
第一节Axios的使用
第二节与Vue整合
第三节跨域
第一节Axios的使用
在实际项目开发中,前端页面所需要的数据往往许哟啊从服务器端获取,这必然设计与服务器的通信,Axios是一个基于promise网络请求库,作用于node.js和浏览器中。Axios在浏览器端使用XMLHttpRequests发送网络请求,并能自动完成JSON数据的转换
安装 npm install axios
地址:https://www.axios-http.cn/
第二节与Vue整合
在实际项目开发中,几乎每个组件都会用到axios发起的数据请求,会与人道如下问题:每个组件中都需要导入axios,每次发送请求都需要填写完整的请求路径,可以通过全局配置的方式解决上述问题。
//配置请求根路径
axios.defaults.baseURL = 'http://api.com'
//将axios作为全局的自定义属性,每个组件可以在内部直接访问(Vue3)
app.config.globalProperties.$http = axios
//将axios作为全局的自定义属性,每个组件可以在内部直接访问(Vue2)
vue.prototype.$http = axios
第三节跨域
为什么会出现跨域问题?
为了保证浏览器的安全,不同的哭护短脚本在没有明确授权情况下,不能读写对方资源,称为同源策略,同源策略师浏览器安全的基石,是一种约定,它是浏览器最核心也是最基本的安全功能,所谓同源(即指在同一个域)就是两个页面具有相同的协议protocol,主机host和端口号port,当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域,此时无法读取非同源网页的Cookie,无法向非同源地址发送AJAX请求。