一、几种发发请求的方式
- 1、在jQuery中 我们向后端发送请求 使用的是 $.ajax
- 2、在原生中 我们使用的是 XML 来发送请求
- 3、在Vue中 通常使用 axios 来发送请求
二、axios
- 1、通常我们不直接使用 axios
- 2、因为axios中没有做同步异步的处理，所以同步异步 需要我们手动封装
-
3、通常情况下，我们需要在vue项目中去手动创建axios和api文件夹
image.png
三、封装post和get请求
封装时采用 es6中 Promise对象
Promise对象 (是一个构造函数)，是es6中 异步编程的一种解决方案
(目前最先进的解决方案 就是 async await 的搭配)
async 和 await 的实现，是通过 Promise来实现的好处：
1、防止回调地狱
2、提高代码可读性
3、像同步一样去执行异步操作这里使用promise来封装 axios中的post和get请求
1、resolve 请求成功后， 数据正常，使用此方法返回正常数据
2、reject 请求成功后， 数据异常，使用此方法返回异常数据
3、.then() 是promise中 请求成功时执行的方法，类似于ajax中的 success
4、.catch 是promise中 请求失败时执行的方法，类似于ajax中的 error首先引入axios模块
import axios from 'axios';封装post和get请求的代码
export default {
// 这里使用promise来封装 axios中的post请求
// 自己定义的post方法
post(url, data_ = {}) {
// 在自己定义的post方法中，将promise的实例化对象返回
return new Promise((resolve, reject) => {
// 在promise中使用 axios 中的post请求
// 发送请求
axios.post(url, {
params: data_,
}).then((res) => {
return resolve(res.data);
}).catch((err) => {
return reject(err)
})
});
},
// 定义一个get方法
get(url, data_) {
return new Promise((resolve, reject) => {
axios.get(url, {
params: data_,
}).then((res) => {
return resolve(res.data);
}).catch((err) => {
return reject(err);
})
})
},
}
四、在api的文件夹中引入我们封装好的post和get请求
-
这里会产生一个跨域问题
1、三同协议 ： 同协议、同域名、同端口
2、三同协议中，但凡有一个不同，都会产生跨域的问题
3、后端api http://127.0.0.1:3000/api/admin/getAllUsers
4、 前端服务器：http://localhost:8081/#/text
5、对比以后就会发现很明显 端口号不同 所以跨域 无法进行数据交互
6、 解决方法：在 vue.config.js中 设置跨域处理
image.png
先引入封装好的axios
import axios from '@/axios/axios';封装查询所有数据的方法
export default {
async getAllUsers(){
//此处的api接口是我之前写好，用哪个接口写哪个接口
return await axios.post('/vueapi/api/admin/getAllUsers');
}
}
五、到页面文件去请求数据
- **在哪个页面请求数据就将api.js引入
import api from '@/api/user.js'; - 定义一个请求数据的方法
data(){
return{
dataList : '', //将请求到的数据存放到dataList中
}
},
methods : {
//在哪里用就将这个方法调用，数据就可以出来
async getAllUsers(){
let res = await api.getAllUsers();
this.dataList = res;
},
}
