ajax封装

ajax是什么

ajax是在不必革新页面的情况下,经由历程js中的XMLHttpRequest对象,从服务器猎取数据,对网页内容举行更新的手艺。

封装要领

function ajax(params){

说明一些必要的参数,比方胜利后的回调函数、错误处置惩罚、url、data、type(http method),而且作兜底处置惩罚

 const{
   success = () => {},
   error = () => {},
   type = 'get',
   data = {},
   url = '/'
} = params;

历程

  1. 建立异步要求对象

       const xhr =  new XMLHttpRequest()
  2. 注册xhr发送吸收要求时的回调,而且在服务器返回效果后,挪用success或许error函数

        xhr.onreadystatechange=function(){
          if(xhr.readyState===4){
            if(xhr.state===200){
              success(JSON.parse(xhr.responseText))
            }else{
              error(xhr.state,xhr.responseText)
            }
          }
        }
    let sendParams = '';
    Object.keys(data).map((key) => {//Object.keys(对象),获得一个由对象里的属性名构成的数组  
        sendParams += `${key}=${data[key]}&`
    });
  3. 推断type

    • 如果是get, 参数就挂在url上,(url?sendParams),send空
    • 如果是其他type, 参数就放在send中通报,send(sendParams),但需要在open和send之间先设置要求头信息
      if(type==='get'){
        xhr.open(type,`${url}?${sendParams}`,true)
        xhr.send()
      }else{
        xhr.open(type,url,true)
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        xhr.send(sendParams);
        }
    }        

挪用实例

    ajax({
        url: '/code/1',
        type: 'POST',
        data: {
            id: 'id',
            name: 'name'
        },
        success(result) {
            // do something
        },
        error(error1, error2) {
            // do something
        }
    })





    原文作者:Dream
    原文地址: https://segmentfault.com/a/1190000019154468
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞