axios的使用

axios

axios是一个专注于网络请求的库！

axios基本使用

1. 解构赋值的时候 使用 : 进行重命名
2. 调用axios之后 使用 async/await进行简化
3. 使用解构赋值 从axios封装的大对象中 把data 属性解构出来
4. 把解构出来data属性 进行重命名 一般都重命名为 {data.res} 1.发起GET请求

document.querySelector('#btnGet').addEventListener('click', async function () {
            // 解构赋值的时候 使用 : 进行重命名
            // 1.调用axios之后 使用 async/await进行简化
            // 2.使用解构赋值 从axios封装的大对象中 把data 属性解构出来
            // 3.把解构出来data属性 进行重命名 一般都重命名为 {data.res}
            const { data: res } = await axios({
                method: 'GET',
                url: 'http://www.liulongbin.top:3006/api/getbooks',

            })
            console.log(res.data);
        })



const result = axios({
            method: 'GET',
            url: 'http://liulongbin.top:3006/api/getbooks',
            // URL中的查询参数
            params: { id: 1 },
            // 请求体参数
            data: {}
        }).then(function (result) {
            console.log(result.data);
        })

2.发起POST请求

 document.querySelector('#btnPost').addEventListener('click', function () {
            axios({
                method: 'POST',
                url: 'http://www.liulongbin.top:3006/api/post',
                data: {
                    name: 'zs',
                    age: 18
                }
            }).then(function (result) {
                console.log(result);
            })
        })

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

在mian.js中直接写入

// 全局配置axios的请求跟路径
axios.defaults.baseURL = 'http://www.liulongbin.top:3006/'
// 把axios挂载到Vue.prototype上 供每个 .vue组件的实例直接使用
Vue.prototype.$http = axios
// 今后在某个vue组件中 要发起请求 直接调用this.$http.xxx

 methods: {
    async getInfo() {
      const { data: res } = await this.$http.get('http://www.liulongbin.top:3006/api/get')
      console.log(res)
    }
  }

缺点：无法实现api接口的复用