你知道么？用Vue搞项目的时候，还得多跟后端打交道！这么说，咱们可得请出咱家的接口请求帮手——axios。虽然它看起来挺小巧的，但是大家都夸好使~所以，快来跟我一起学习怎么用Vue发送接口请求以及如何更懂行地利用axios吧～
1.安装axios
要在电脑上装个 AXIOS，就在npm那捣鼓几下就好，比玩小游戏都轻松！
2.引入axios
想轻松弄到好货？赶紧让Axios成为你的得力助手！只要简单引入它，就随时能用啦～
3.发送接口请求
发送 axios 请求很简单，就是 get、post、put、delete 这几种类型。喜欢哪个用哪个呗~想做个 get 请求也不难，respose 收到后，扔到 then()和 catch()里面去就行！
搞定下面这些招式，你就可以轻松简洁地搞到Vue项目里滴服务器数据啦!而且，连后台返回的数据都能搞定~
npm install axios --save
二、数据交互
别只看接口，其实重要的在数据传输上哦～像常用的v-model命令和axios这些东西可都帮我们轻松处理后端和前端通信。
import axios from 'axios';
1.在Vue组件中绑定数据
在Vue组件中，使用v-model可以将Data中的数据传递给Form元素。只要用户在界面上随便打字，立马就能看到颜色跟着改变！
2.发送数据到后端
AXIO能帮你把表单数据发给后台，别忘了要先转个JSON格式喔。收到了提醒会告诉你的，然后直接去对应的回调函数找结果。按照这个来就没问题~
axios.get('/api/user')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
3.显示后端返回的数据
到时候收到消息，直接扔上去就行了。方法超级简单，就是后台传来啥数字，前端就赶紧换成预先设置好的变量或属性，这样网页上的内容就能自动刷新喽！
搞定这些，网页和后台的信息就妥。用户用起来肯定更方便，界面看起来也顺眼多了！
三、async/await方式进行接口请求
async function getUser() {
try {
const response = await axios.get('/api/user');
console.log(response);
} catch (error) {
console.error(error);
}
}
ECs6真心强大！那个Promise的用法我就称赞不已，这次居然还有bug杀手级的async await登场。两者搭配更是锦上添花，代码看着都舒心且效率高，摆脱了繁琐的回调函数。
1.使用async/await发送接口请求
把异步函数加上async标签，再用await等着它跑完就成。这方法简便易懂，出点问题也能轻松应对！
2.优化代码结构
新版Promise太好用！特别是搞麻烦的异步部分。再说了，出啥问题都能很快找到罪魁祸首呐！
Async/Wait真的好使，可以帮你理清代码逻辑，特别是Vue那种框架的时候更省事儿。
四、根据需求选择合适工具库
export default { data () { return { username: '' } }, methods: { submitForm () { // 提交表单的代码 } } }
选好趁手工具挺重要哒，比如处理数据交互这种棘手的题目。市面上好用的软件多得数不清，就像axios和fetch这类神器，真心给力！
1.考虑项目规模和复杂度
小活儿用实用的工具箱搞定；大项目咋办？得用个全能又能扩充功能的厉害货！
2.结合团队技术栈和经验
submitForm () {
axios.post('/api/user', {
username: this.username
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.error(error);
});
}
挑选合适工具时，记得选那些常人也能用的，这样就能提高我们的效率，节省不少时间！
学Vue，先选好顺手的工具包呗。然后，要学会搞接口请求和数据交互！学会这几个小技巧，不管是干啥都方便多了，也能让用户享受更好的体验，保证我们的项目能够妥善完工！
评论0