axios

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第19天，点击查看活动详情

1.axios 是一个封装库,基于XHR封装，是一个 异步请求 技术，推荐使用 （前端目前最流行的ajax请求库）

2.特点

   ①。从浏览器中创建XMLHttpRequests
   ②。从浏览器中创建XMLHttpRequests
   ③。支持 promise API
   ④。拦截请求和响应
   ⑤。转换请求数据和响应数据
   ⑥。取消请求
   ⑦。自动转换JSON数据
   ⑧。客户端支持防御XSRF

3。学习网址

    https: //www.bootcdn.cn/axios/ [

4.使用JSON-server 搭建服务器

   ①。JSON-server 用来快速搭建 服务器
   ②。网址：https://github.com/typicode/json-server
   ③。npm 下载    npm i json-server -g
   ④。创建JSON文件
   json-server 文件名.json
   ⑤。启动服务器（查看文件） 
 json-server 文件名.json     (简写)
 json-server --watch 文件名.json   （全写）

5.测试接口 postman

           测试get post put delete 请求
           下载网址：https://www.postman.com/download
           

二。创建axios

1.首先创建一个json文件，里面存储数据，在后端运行，输入json-server (文件名)，

会自动生成接口，复制接口可以看到数据

2.查询用户信息用get请求

①。查询全部，不需要带参数

        btns[0].onclick = () => {
        // axios查询服务器的数据
        let aa = axios(
            {
                // 请求地址
                url: "http://localhost:3000/studenf",
                // 请求方式
                method: "GET"
            }
        ).then(
            res => { console.log(res.data, "成功") },
            err => { console.log(err, "失败"); }
        )
        // axiaos是一个基于promise封装的网络请求，基于xhr进行二次封装
        // axiaos调用返回值是promise
        // 成功返回的值res(response)     失败返回err
        // 默认是一个json文件
        // 服务器数据放在data中
        // axios返回值是一个axios封装的response对象
        // console.log(aa)



        // 简化
        axios.get("http://localhost:3000/studenf").then(
            res => { console.log(res.data, "成功") },
            err => { console.log(err, "失败"); }
        )
    }
    

3。根据姓名查询

                   let infor_name = document.querySelector(".infor_name")
    btns[1].onclick = () => {
        //原生版
        axios({
            // 请求地址
            url: "http://localhost:3000/studenf",
            // 请求方式
            method: "GET",
            // parmas    表示  query  参数
            params: { name: infor_name.value }
        }).then(
            res => { console.log(res.data, "成功"); },
            err => { console.log(err, "失败"); }
        )



        // 简写
        axios.get("http://localhost:3000/studenft", { params: { name: infor_name.value } }).then(
            res => { console.log(res.data, "成功"); },
            err => { console.log(err, "失败"); })
    }

4.添加

          // 添加
    let add_name = document.querySelector(".add_name")
    let add_sex = document.querySelector(".add_sex")
    let add_age = document.querySelector(".add_age")

    btns[2].onclick = () => {
        let add_id = parseInt(document.querySelector(".add_id").value)

        // axios({
        //     //         // 请求方式
        //     url: "http://localhost:3000/student",
        //     method: "POST",
        //     data: { name: add_name.value, sex: add_sex.value, age: add_age.value },
        // }).then(
        //     res => { console.log(res.data, "成功"); },
        //     err => { console.log(err.message, "失败"); }
        // )

        // 简写

        let obj = { id: add_id, name: add_name.value, age: add_age.value, sex: add_sex.value }
        console.log(obj)

        axios.post("http://localhost:3000/student", obj).then(
            res => { console.log(res, "成功"); },
            err => { console.log(err, "失败"); })

    }
    

5.修改根据id修改

                       // 修改
    let amend_name = document.querySelector(".amend_name")
    let amend_sex = document.querySelector(".amend_sex")
    let amend_age = document.querySelector(".amend_age")

    btns[3].onclick = () => {
        let id = parseInt(document.querySelector(".amend_id").value)

        // axios({
        //     //         // 请求方式
        //     url: `http://localhost:3000/student/${id}`,
        //     method: "PUT",
        //     data: { name: amend_name.value, sex: amend_sex.value, age: amend_age.value },
        // }).then(
        //     res => { console.log(res.data, "成功"); },
        //     err => { console.log(err, "失败"); }
        // )

        // 简写

        // let obj = { name: amend_name.value, sex: amend_sex.value, age: amend_age.value }



        axios.put(`http://localhost:3000/student/${id}`, obj).then(
            data => { console.log(data, "成功"); },
            err => { console.log(err, "失败"); })

    }

6.根据id删除

     // 删除

    btns[4].onclick = () => {
        if (confirm("你确定要删除吗")) {
            let delete_id = parseInt(document.querySelector(".delete_id").value)
            // console.log(id)
            axios({
                //         // 请求方式
                url: `http://localhost:3000/studenf/${delete_id}`,
                method: "DELETE",
            }).then(
                res => { console.log(res, "成功"); },
                err => { console.log(err, "失败"); }
            )

            // 简写

            // axios.delete(`http://localhost:3000/studenf/${delete_id}`).then(
            //     ({ data }) => { console.log(data, "成功"); },
            //     err => { console.log(err, "失败"); })
        }


    }