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(); } }