axios官网：axios中文文档|axios中文网 | axios
axios特点
支持客户端发送Ajax请求
支持服务端Node.js发送请求
支持Promise相关用法
支持请求和响应的拦截器功能
自动转换JSON数据
axios 底层还是原生js实现, 内部通过Promise封装的
axios({
method: '请求方式', // get post
url: '请求地址',
data: { // 拼接到请求体的参数, post请求的参数
xxx: xxx,
},
params: { // 拼接到请求行的参数, get请求的参数
xxx: xxx
}
}).then(res => {
console.log(res.data) // 后台返回的结果
}).catch(err => {
console.log(err) // 后台报错返回
})1.1-vue使用axios流程
-
1.下载axios : 在根目录执行npm命令:
npm i axios-
脚手架基于webapck,而webpack又基于node. 因此vue项目所有的包都可以用npm来下载管理
-
-
2.导入axios : 需要使用ES6模块化语法
-
import axios from "axios"
-
-
3.使用axios : 与之前语法一致
<template>
<div>
<p>获取所有图书信息</p>
<button @click="getAllFn">点击-查看控制台</button>
</div>
</template>
<script>
//
// 1. 下载axios : npm i axios
// 2. 引入axios : import axios from "axios"
// 3. 发起axios请求
import axios from "axios";
export default {
methods: {
getAllFn() {
axios({
url: "请求路径",
method: "GET", // 默认就是GET方式请求, 可以省略不写
}).then((res) => {
console.log(res);
});
// axios()-原地得到Promise对象
},
}
};
</script>1.2-ajax请求列表( axios挂载到vue原型 )
axios挂载到vue原型作用 ： 让所有的组件全部都可以使用axios,而无需导入
底层原理： 每一个组件都是vue实例对象（之前反复强调这句话还记得吗~），只要把数据挂载到vue的原型中，那么任何组件都可以通过原型链访问到你挂载的数据。
举一反三 ： 这种思想非常的重要，在今后的vue学习中。只要一个对象在所有组件都能使用，而无需导入。那么只需要将其在main.js文件中挂载到vue的原型中即可。
为啥要叫
$axios呢？其实叫什么都可以, 因为vue实例中的很多属性属性都是以$开头，为了代码风格一致，一般叫做$axios. 随着学习深入，你会发现vue中很多属性都是$开头
?
-
1.下载axios
-
npm i axios
-
-
2.在main.js中将axios挂载到Vue构造函数原型中
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
//1.导入bootstrap
import "bootstrap/dist/css/bootstrap.css"
//2.导入axios
//(1)导包
import axios from 'axios'
//(2)设置axios基地址
axios.defaults.baseURL = "xxxxx"
//(3)将axios挂载到Vue构造函数原型中
Vue.prototype.$axios = axios
new Vue({
render: h => h(App)
}).$mount('#app')
.在created钩子中发送ajax请求
-
举一反三: created钩子中完成data数据的初始化，所以只要一个数据你希望页面一加载的时候就获取，那么一般会写在created钩子中哈~ -
App.vue文件
<script>
//导入组件
import MyHd from "./components/MyHd.vue";
import MyGd from "./components/MyGd.vue";
import MyFt from "./components/MyFt.vue";
export default {
//注册组件
components: {
MyHd,
MyGd,
MyFt
},
data(){
return {
list: [] // 商品所有数据
}
},
created(){
// 不必在自己引入axios变量, 而是直接使用全局属性$axios
this.$axios({
url: "xxxxx"
}).then(res => {
console.log(res);
this.list = res.data.list
})
}
};
</script>1.3-渲染列表 ( 父传子 )
vue渲染ajax数据流程
1.发送ajax请求
2.在data中声明 数组/对象(取决于你的ajax返回的是数组还是对象)， 把ajax响应的数据挂载到data中
3.使用指令渲染data中的数据 （数据驱动：当data中数据变化了，vue会自动渲染）
如果是在当前组件渲染，就直接在当前组件使用指令渲染
如果是在子组件渲染，就通过props把数据传递给子组件，然后在子组件中渲染
App.vue
<MyGd? v-for="item in list"?
:key="item.id"
:goods="item"
></MyGd>
MyGd.vue
-
细节1 ： 注意html中的标签id具有唯一性，要避免生成重复的id。 所以一般标签的id属性会动态绑定为item.id或数组下标index
-
细节2： 如果使用v-bind指令渲染checkbox表单的checked值，仅仅只是单向绑定了。当用户点击checkbox的时候，data不会变化。 但是用v-model去绑定checkbox表单的checked值，就会形成双向绑定。 此时用户点击checkbox的时候，data也会自动变化
<template>
<div class="my-goods-item">
<div class="left">
<div class="custom-control custom-checkbox">
<input
v-model="goods.goods_state"
type="checkbox"
class="custom-control-input"
:id="goods.id"
/>
<label class="custom-control-label" :for="goods.id">
<img :src="goods.goods_img" alt="" />
</label>
</div>
</div>
<div class="right">
<div class="top">{{ goods.goods_name }}</div>
<div class="bottom">
<span class="price">￥ {{ goods.goods_price }}</span>
<span>
<MyCount :goods="goods"></MyCount>
</span>
</div>
</div>
</div>
</template>
<script>
import MyCount from "./MyCount.vue";
export default {
props: {
goods: {
type: Object,
required: true
}
},
components: {
MyCount
}
};
</script>
<style lang="less" scoped>
.my-goods-item {
display: flex;
padding: 10px;
border-bottom: 1px solid #ccc;
.left {
img {
width: 120px;
height: 120px;
margin-right: 8px;
border-radius: 10px;
}
.custom-control-label::before,
.custom-control-label::after {
top: 50px;
}
}
.right {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
.top {
font-size: 14px;
font-weight: 700;
}
.bottom {
display: flex;
justify-content: space-between;
padding: 5px 0;
align-items: center;
.price {
color: red;
font-weight: bold;
}
}
}
}
</style>