Axios简介与安装
- Axios是一个基于promise的网络请求库,作用于node.js和浏览器中
- Axios在浏览器端使用XMLHttpRequests发送网络请求,并自动完成json数据的转换
- 安装:npm install axios
- 官方文档:https://www.axios-http.cn/
Axios基础语法
get请求
当参数比较少时,直接在路径里面用问号拼接传入。
then里面的是个回调函数,原始形态是如下:
axios.get("/user?id=1234").then(function(response){//处理成功的情况,走then里面的函数console.log(response);}).catch(function(error){//处理错误的情况,走catch里面的函数console.log(error);}).then(function(){//总会执行这里面的函数});
当参数比较多时,可以使用params传入。
axios.get("/user",{params:{id:12345}}).then(function(response){//处理成功的情况,走then里面的函数console.log(response);}).catch(function(error){//处理错误的情况,走catch里面的函数console.log(error);}).then(function(){//总会执行这里面的函数});
但因为回调函数的作用域改变,如果想要在axios里面使用this指针,会报错undefinded,所以更经常的是如下箭头函数的形式,使得回调函数的作用域和其父级相同。
axios.get("/user/findAll").then((response)=> {console.log(response);}).catch(function (error) {console.log(error);}).then(function () {console.log("请求成功发送");});
post请求
axios会自动把请求体里的数据,在这里即username和password字段,转成json后传给后端。
axios.post("/user",{username: 'shanshan',password: '12345'}).then(function(response){//处理成功的情况,走then里面的函数console.log(response);}).catch(function(error){//处理错误的情况,走catch里面的函数console.log(error);}).then(function(){//总会执行这里面的函数});
支持async/await用法
async function getUser() {try {const response = await axios.get('user?id=12345');console.log(response);} catch (error) {console.error(error);}}
跨域问题
同源策略与CORS
- 同源策略:为了保证浏览器的安全,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源。
- 同源:即两个页面具有相同的协议、主机、端口号。
- 为了解决跨域问题,CORS制定了一个技术标准,使得可以在不破坏既有规则的前提下,通过后端服务器实现CORS接口,从而实现跨域通信。
- CORS将请求分为两类:简单请求和非简单请求。
GET、POST、application/x-www-form-urlencoded、multipart/form-data、text/plain等常见的请求属于简单请求。
在后端的controller类上面加一个@CrossOrigin注解,即可使得控制器内所有请求都通过跨域问题。
Axios引入与使用
在main.js里写上
import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:8088'
Vue.prototype.$http = axios
在App.vue里发送axios请求,一般在页面被挂载前就发送
export default {name: 'App',data: function () {return {movies: [{ id: 1, title: "金刚狼1", rating: 8.7 },{ id: 2, title: "金刚狼2", rating: 8.8 },]}},created: function () {this.$http.get("/user/findAll").then((response)=> {console.log(response);}).catch(function (error) {console.log(error);}).then(function () {console.log("请求成功发送");});},mounted: function () {console.log("app被挂载完毕");},components: {Movie}
}