【ajax第一天】axios网络通信库的基本用法

什么是axios

ajax 是浏览器与服务器进行数据通信的技术，它可以在不刷新页面的情况下，动态更新页面上的数据

axios 是一个基于 promise 的网络请求库，对 ajax 原生的 XMLHttpRequest 对象进行了封装，可以更方便地发出请求

http(s) 协议 是网络数据传输的主要协议，规定了数据传输的格式等，在学习 ajax 前最好有一个了解

// axios 网络请求的基本语法
axios({
    //请求配置
}).then((res) => {
    //处理数据 res.data是服务器返回的数据
}).catch((err) => {
    //处理错误 err.response.data是服务器返回的错误信息
});

axios获取数据

使用场景：获取数据，渲染页面

// axios 获取数据的语法
axios({
    url: 接口地址,
    method: 请求方法（GET可省略）,
    params: 查询参数对象
}).then((res)=>{
    处理服务器返回的数据
})

eg.获取城市数据

document.querySelector("button").addEventListener("click", () => {
    // 发起网络请求
    axios({
        url: "http://hmajax.itheima.net/api/city",
        params: {
            pname: "河北省",
        },
    }).then((res) => {
        // 如果请求成功，就渲染页面
        document.querySelector(".city").innerHTML = res.data.list.join(",");
    });
});

axios提交数据

使用场景：注册登录、添加或修改表单数据

// axios 提交数据的语法
axios({
    url: 接口地址,
    method: 请求方法（提交为POST）,
    data: 提交的数据对象
}).then((res)=>{
    处理服务器返回的数据
})

eg.新用户注册

const registerBtn = document.querySelector(".register");
registerBtn.addEventListener("click", function () {
    const username = document.querySelector("input[name=username]").value;
    const password = document.querySelector("input[name=password]").value;
    axios({
        url: "http://hmajax.itheima.net/api/register",
        method: "POST",
        data: {
            username,
            password,
        },
    }).then((res) => {
        console.log(res.data);
    }).catch(err => {
      	console.log(error.response.data)
    })
});

axios案例实战

参照 接口文档 完成图书管理案例、个人信息管理案例

增删改查的核心业务

• 查询(GET)：请求查询数据，渲染到页面

• 添加(POST)：收集数据，请求提交

• 修改(PUT)：请求数据并回显，收集数据，请求修改

• 删除(DELETE)：绑定点击事件，请求删除

头像上传的一般步骤

1. 给上传文件的标签绑定 change 事件
2. 封装 FormData 对象，在网络上传输图片
3. 使用 axios 发起提交请求
4. 如果上传成功，将服务器返回的在线图片地址设为头像