简介

axios 是一个专注于网络请求的库。axios只负责发请求，拿数据，不负责操作DOM，与jQuery不同。
中文官网：http://www.axios-js.com
英文官网：https://www.npmjs.com/package/axios

基本使用

安装

npm i axios -S

1 axios的基本语法

axios({
	method: '请求的类型',
	url: '请求的URL地址',
	// URL中的查询参数，如GET请求
	params: {},
	// 请求体参数，如POST请求
	data: {},
}).then((result)=>{
	// .then 用来指定请求成功之后的回调函数
	// 形参中的result是请求成功之后的结果
})

调用 axios 方法得到的返回值是 Promise 对象。
result中的数据不是接口返回的真实数据，result.data才是真实数据

2 发起 GET 请求：

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

3 发起 POST 请求：

axios结合async await 发起post请求

document.querySelector('#btnPost').addEventListener('click',async function(){
            // 如果调用某个方法的返回值是 Promise 实例，则前面可以添加 await
            // await 只能用在被 async 修饰的方法中
            const result = await axios({
                method: 'POST',
                url: 'http://www.liulongbin.top:3006/api/post',
                data: {
                    name: 'zs',
                    age: 20
                }
            })
            // .then((result)=>{
            //     console.log(result)
            // })
            // .then 可以使用 async await 简化
            console.log(result)
            // 如果不加 await 打印出来的就是 Promise 对象
        })

使用解构赋值得到服务器接口返回的数据

document.querySelector('#btnGET').addEventListener('click',async function(){
            const result = await axios({
                method: 'GET',
                url: 'http://www.liulongbin.top:3006/api/getbooks',
            })
            const {data} = await axios({
                method: 'GET',
                url: 'http://www.liulongbin.top:3006/api/getbooks',
            })
            console.log(result)
            console.log(data)
            console.log(data.data)
        })

1 调用 axios 之后，使用 async/await 进行简化
2 使用解构赋值，从 axios 封装的大对象中，把 data 数据解构出来
3 把解构出来的 data 属性，使用冒号进行重命名，一般都重命名为 {data : res}

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)
  console.log(res.data)
})

简化版的函数

基于axios.get()和axios.post()发起请求

axios.get()基本语法

axios.get('url地址',{
                // get参数
                params: {}
            })

示例

document.querySelector('#btnGET').addEventListener('click',async function(){
            const {data:res} = await axios.get('http://www.liulongbin.top:3006/api/getbooks',{
                params: {id: 1}
            })
            console.log(res)
            console.log(res.data)
        })

axios.post()基本语法

axios.post('url地址',{// post请求体数据})

示例

document.querySelector('#btnPost').addEventListener('click',async function(){
            const {data:res} = await axios.post('http://www.liulongbin.top:3006/api/post',
                { name: 'zs', age: 20}
            )
            console.log(res)
            console.log(res.data)
        })