axios的AJAX

一、axios发送AJAX请求（axios.get和axios.post）

0. 引入axios:

  <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
​

2. get请求

// 配置 baseURL
    axios.defaults.baseURL = 'http://127.0.0.1:8000'
​
    btns[0].onclick = function () {
      // GET
      axios.get('/axios-server', {
        // url 参数
        params: {
          id: 100,
          vip: 7
        },
        // 请求头信息 
        headers: {
          name: 'atguigu',
          age: 20
        }
      }).then(value => {
        console.log(value); // 返回一个对象，比较完整
      })
    }

3. post请求

    btns[1].onclick = function () {
          axios.post('./axios-server',
            // 2. 请求体
            {
              username: 'admin',
              password: 'admin'
            },
            // 3.其他信息：
            {
              //url param
              params: {
                id: 200,
                vip: 9
              },
              // header param
              headers: {
                height: 180,
                weight: 180,
              }
            })
        }

二、axios通用方法发送请求

btns[2].onclick = function () {
      axios({
        // 请求方法
        method :'POST',
        // url
        url: './axios-server',
        // url参数
        params: {
          vip: 10,
          level: 30
        },
        // 头信息
        headers: {
          a: 100,
          b: 100
        },
        // 请求体信息
        data: {
          username: 'admin',
          password: 'admin'
        }
      }).then(response=>{
        console.log(response); // 一个对象
        console.log(response.status); //响应状态码
        console.log(response.statusText); // 响应状态字符串
        console.log(response.headers); // 响应头
        console.log(response.data); // 响应体
      })
    }