vue中的axios应用

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