ajax 封装与应用

• axios 使用
• ajax 的封装
• 综合训练 - 图书管理

1.axios 使用

jquery: 基于js 做很多函数的封装 ajax 09--13年

axios ： 4行 14-21年【主流】 ajax+promise[异步代码]

fetch: w3c 国际标准化定义组织 21年

• promise 介绍

状态机： 属于异步代码 异步代码执行 分层3种状态， 等待 pending 成功reslove 失败reject

异步代码：需要一定时间才可以出执行结果的代码（延时器 定时器,事件的执行函数,ajax），异步代码 打破了js代码的执行顺序

let p = new Promise(function(resolve,reject){})

p.then(function(res){  
//如果promise 执行结果为成功  res==成功的返回值
}).catch(function(err){
    //err失败的返回值
})

• 代码执行顺序

如果既有 同步代码 也有异步代码，会先执行 所有的同步代码，然后再依次执行 异步代码

 console.log(1);


    setTimeout(function(){
        console.log(2);
    },1000)

    console.log(3);

    setTimeout(function(){
        console.log(4);
    },0)

  
    document.querySelector('div').addEventListener('click',function(){
        console.log(5);
    })

    console.log(6);
    // 1 3 6  2  4  5

let xhr = new XMLHttpReqeust();
xhr.open('get','xxxx');
xhr.send()
//监听步骤改变 并获取返回值
xhr.addEventListener('readystatechange',function(){
    
})

2.axios 引入

npm install axios

https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.min.js bootcdn网站给的 cdn链接

复制源代码到本地 axios.js

  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.min.js"></script> -->
    <script src="./axios.js"></script>
    <script>
        console.log(axios);
    </script>

3.通过axios 实现接口调用

• get请求

axios.get('请求地址?请求参数')
    .then(function(res){})      //成功获取返回值
    .catch(function(err){})     //请求失败

axios.get('请求地址',{params:{key:val&key1:val1}})
    .then(function(res){})      //成功获取返回值
    .catch(function(err){})     //请求失败

• post请求

  方法

axios.post('请求地址',{key:val&key1:val1})
    .then(function(res){})      //成功获取返回值
    .catch(function(err){})     //请求失败

​ 案例

  <script src="./axios.js"></script>
    <script>
        // get请求调用
        axios.get('http://8.137.157.16:8099/test/getTest?name=张麻子')
            .then(function (res) {
                console.log(res.data);
            })
            .catch(function (err) {
                console.log(err);   //network time out 
            })
    </script>

• 上传文件

方法

  let formData = new FormData();
  formData.append('file',file)
  axios.post('请求地址',formData)
	.then(function(res){})  //成功获取到返回值
    .catch(function(err){})   //请求失败

案例

        let inp = document.querySelector('input')
        inp.addEventListener('change',function(){
            let file =inp.files[0]
            let formData = new FormData()
            formData.append('file',file)
            axios.post('http://8.137.157.16:8099/test/upload',formData)
            .then(function (res) {       //成功获取返回值
                console.log(res);
            })
            .catch(function (err) {       //请求失败
                console.log(err);
            }) 
        })

4.手动封装ajax

js基础

函数封装

回调深入理解

promise 必须 回调

异步代码块---浏览器事件循环机制--eventloop

let res = http.get('地址',{params:{key:val}})

let res = http.post('地址',{key:val})

let res = http.upload('地址',formData)

1.创建一个独立文件 http.js

2.创建 一个对象 http

3.http对象 有 3个属性 get post upload

4.每个属性的值 都是函数

5.get/post/upload 请求接收了几个数据，返回了什么数据

**解决 异步代码的返回 return ，只能必须使用 回调函数callback **

回调：现在不调（大函数调用的时候） 回头再调（大函数运行有结果的时候）

arr.map(function(item,index){
    console.log(item)
	console.log(index)
})

//等待2s 之后输出两个数字之和
 sum(100,200,funciton(res){
     console.log(res)  // 2打印和
     })


function sum(a,b,callback){
   setTimeout(functon(){
              let c= a+b;  //300
              callback(c);
        
     },2000)
}

http.js

// 1.创建一个独立文件 http.js

// 2.创建 一个对象 http

// 3.http对象 有 3个属性 get  post  upload

// 4.每个属性的值 都是函数

// 5.get/post/upload 请求接收了几个数据，返回了什么数据

function paramsFormat(params){
   // for in  Object.keys  
   let keys = Object.keys(params) // ['name','id']
   let str = '';
   keys.forEach(function(item,index){ // name id 
       str  = str + `${item}=${params[item]}&`
   })
   str = str.slice(0,-1);
   return str;
}


const http = {
  get: function (url,data={params:{}},callback) {
    let res = null;
    // 参数的拼接
    //  {name:'张麻子',id:'111'} ===》key=val&key1=val
    const params = data.params;  // {name:'张麻子',id:'111'}
    let str = paramsFormat(params)

    // ajax 核心4句
    let xhr = new XMLHttpRequest();
    xhr.open('get',url+'?'+str)
    xhr.send()
    xhr.onreadystatechange = function(){
        if(xhr.readyState ==4 && xhr.status ==200){
         
            res = JSON.parse(xhr.responseText);
            // 调用函数 传递数据给页面
            callback(res)
        }
    }

    // 如果函数在运行过程中，运行到了 结束的} 
    // 都没有看到return 自动返回undefined
    // return ;
  },

  post: function () {

  },

  upload: function () {

  },

};

• 调用方式

 <script src="./http.js"></script>

    <script>
        // get
        http.get('http://8.137.157.16:8099/test/getTest', { params: { name: '张麻子', id: '111' } },function(res){
            console.log(res);
        })


        // post
        http.post('地址',{name:'张麻子'},function(res){
            console.log(res);  //后端返回数据
        })

        // 文件上传
        let formDta = new FormData()
        fomrData.append('file',file)
        http.upload('地址',formData,function(res){
            console.log(res); //后端返回数据
        })

    </script>