1. axios请求分类
- get请求
import axios from 'axios';
axios.get(
url,//请求地址
{
params:{}, //请求参数
}
).then((response)=>{
return response.data //将数据传给下一个then,作为下一个then的参数
})
- post请求
import axios from 'axios';
import Qs from 'qs';
axios.post(url, //请求地址
Qs.stringify(params) //请求参数
[,{config}] ) //请求的其他配置
.then((response)=>{
return response.data //将数据传给下个then,作为下一个then的参数
})
- request请求
import axios from 'axios';
axios.request({config})
||
axios({
url:''//请求地址
method:'get' | 'post' //请求方式
params:{} //请求参数
})
2.axios的使用(以get请求为例)
- 直接在页面上使用
//需要发送ajax请求的页面
import axios from 'axios';
axios.get(url,{
params:{} //请求参数
})
- 实例属性化
1 //在main.js文件中引入axios
2
3 import axios from 'axios';
4 Vue.prototype.$axios = axios;
5
6 //在需要使用的页面进行使用
7 this.$axios.get("url").then(response=>{
8 //将请求到数据赋值给data仓库中的变量
9 this.types = response.data.result;
10 })
- 工具化和模块化
- 在src文件夹下创建api文件夹,其中有index.js文件
- 在index.js文件中引入axios模块
- 定义基础路径
- 定义地址
- 定义方法
- 导出方法
- 在main.js文件中引入api,并将方法实例属性化
- 在页面上使用
//引入axios模块
import axios from 'axios';
//定义基础路径
axios.defaults.baseURL = process.env.BASE_URL;
//定义地址
const urls = {
types:"/filmApi/loadTypes.php",
films:"/filmApi/loadFilms.php",
film:"/filmApi/loadFilmById.php"
}
//定义方法
const loadTypesData = function(){
return axios.get(urls.types)
.then((response)=>{
return response.data.result
});
}
//导出方法
export default {
loadTypesData
}
//在main.js 中进行原型装载
import api from './api'
Vue.prototype.$api=api;
//在对应的组件上使用
export default{
data(){
return{
types:[];
}
},
methods:{
this.$api.loadTypesData()
.then((response)=>{
this.types=response,data.result
})
},
mounted(){
this.loadData();
}
}