axios概念

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

1.有“GET”方式和“POST”方式

①发送“GET”请求

axios({
  // 请求方式
  method: 'GET',
  // 请求的地址
  url: 'http://www.liulongbin.top:3006/api/getbooks',
  // URL 中的查询参数
  params: {
    id: 1
  }
}).then(function (result) {
  console.log(result)
})

②发送“POST”请求

document.querySelector('#btnPost').addEventListener('click', async function () {
  // 如果调用某个方法的返回值是 Promise 实例，则前面可以添加 await！
  // await 只能用在被 async “修饰”的方法中
  const { data: res } = await axios({
    method: 'POST', 
    url: 'http://www.liulongbin.top:3006/api/post',
    data: {
      name: 'zs',
      age: 20
    }
  })

  console.log(res)
})

2.总结：

①如果调用某个方法的返回值是 Promise 实例，则可以在前面添加await进行简化，但是await只能用在被async“修饰”的方法中

②在上面代码中还用到了解构赋值，解构赋值是从axios封装的大对象中，把data属性解构出来

③可以把解构出来的data属性，使用冒号进行重命名，一般为{data : res}

3.可以直接通过axios.get和axios.post方式请求

例如以下例子：

 document.querySelector('#btnGET').addEventListener('click', async function () {
      /* axios.get('url地址', {
        // GET 参数
        params: {}
      }) */

      const { data: res } = await axios.get('http://www.liulongbin.top:3006/api/getbooks', {
        params: { id: 1 }
      })
      console.log(res)
    })

    document.querySelector('#btnPOST').addEventListener('click', async function () {
      // axios.post('url', { /* POST 请求体数据 */ })
      const { data: res } = await axios.post('http://www.liulongbin.top:3006/api/post', { name: 'zs', gender: '女' })
      console.log(res)
    })