axios

专注于数据请求的库

// 1.调用axios方法得到的返回值是Promise对象
const result = axios({
    method: 'GET',
    url: '',
    // url中的查询参数
    params: {},
    // 请求体参数
    data: {}
})

// response不是服务器返回的真实数据，response.data才是真实数据
result.then(function(response) {
    // 处理返回数据
})

结合async和await使用axios

// 如果调用某个方法的返回值是Promise实例，则前面可以添加await
// await只能用在被async修饰的方法中
document.querySelector('#btnGet').addEventListener('click', async function() {
    // 解构赋值的时候，使用:进行重命名
    const{data: res} = await axios({
        method: 'GET',
        url: '',
        // url中的查询参数
        params: {},
        // 请求体参数
        data: {}
    })
// data是服务器返回的真实数据
    res.data
})

axios直接发起get和post请求

document.querySelector('#btnGet').addEventListener('click', async function() {
    const{data: res} = await axios.get('url', {
        params: {id : 1}
    })
})

document.querySelector('#btnPost').addEventListener('click', async function() {
    const{data: res} = await axios.post('url', {'post请求体'})
})

 VUE中使用axios

import axios from 'axios'
export default {
    data() {
        return {
            list: []
        }
    }
    created() {
        this.initMethod()
    },
    methods: {
        async initMethod() {
            const{data: res} = await axios.get('url')
            // 只要请求回来的数据在页面渲染期间要用到，则必须转存到data中
            this.list = res.list
        }
    }
}

如何把axios挂载到Vue的原型上并配置请求根路径

// 在main.js中进行挂载
import Vue from 'vue'
import axios from 'axios'
// 配置请求根路径
axios.default.baseURL= '请求根路径'
// 挂载原型，但是不利于api接口的复用
Vue.prototype.axios = axios

// 在每个vue中不需要再次导入axios，直接this.axios
export default {
    data() {
        return {
            list: []
        }
    }
    created() {
        this.initMethod()
    },
    methods: {
        async initMethod() {
            const{data: res} = await this.axios.get('url')
            // 只要请求回来的数据在页面渲染期间要用到，则必须转存到data中
            this.list = res.list
        }
    }
}