MENU

ajax原理,封装和Promise

September 20, 2020 • Read: 91 • JavaScript,前端学习

Grit

ajax 原理和 promise 封装

ajax

ajax发送请求和接收响应

四个步骤

  1. 创建XMLHttpRequest()对象
  2. 调用创建对象open方法
  3. 监听创建对象onreadystatechange事件

    • 在事件处理函数里面操作 js 文件内容
  4. 调用对象的send方法(发送请求)
const request = new XMLHttpRequest();
request.open(method, url);
request.onreadystatechange = () => {
  if (request.stateCode === 4) {
    if (request.status < 400) {
      //请求成功
    } else if (request.status >= 400) {
      //请求失败
    }
  }
};
request.send();

JSON

中文官网
JSON支持的数据类型有:
string,number,bool,null,object,array

JSON.parse()

JSON ==>> js数据类型
  • 将符合JSON语法的字符串转换为 js 对应的数据类型
  • 如果不符合JSON数据类型,则直接抛出一个Error对象
  • try catch捕获错误

JSON.stringify()

js数据类型 ==>> JSON
  • JSON.parse()的逆运算
  • 不一定能成功

异步与 Promise

异步

  • 异步代码不需要等待返回结果,就可以继续运行下面的程序

下面以 AJAX 请求为例,来看一下同步和异步的区别:

8 异步 AJAX:
主线程:“你好,AJAX 线程。请你帮我发个 HTTP 请求吧,我把请求地址和参数都给你了。”
AJAX 线程:“好的,主线程。我马上去发,但可能要花点儿时间呢,你可以先去忙别的。”
主线程::“谢谢,你拿到响应后告诉我一声啊。”
(接着,主线程做其他事情去了。一顿饭的时间后,它收到了响应到达的通知。)

- 同步 AJAX:
  主线程:“你好,AJAX 线程。请你帮我发个 HTTP 请求吧,我把请求地址和参数都给你了。”
  AJAX 线程:“......”
  主线程::“喂,AJAX 线程,你怎么不说话?”
  AJAX 线程:“......”
  主线程::“喂!喂喂喂!”
  AJAX 线程:“......”
  (一炷香的时间后)
  主线程::“喂!求你说句话吧!”
  AJAX 线程:“主线程,不好意思,我在工作的时候不能说话。你的请求已经发完了,拿到响应数据了,给你。”

回调

将函数作为另一个函数的参数.

eg:

let fn = (msg,callback){
    console.log(msg)
    if(typeof callback === 'function'){
        callback()
    }
}//打印出msg的内容

异步和回调的关系

  • 异步任务需要在得到结果时通知 js 来获取结果

判断同步异步

如果一个函数的返回值处于:

  • setTimeout
  • AJAX
  • AddEventLisener
    这三个东西内部,呢么这个函数就是异步的

AJAX 封装

ajax = (method,url ,options){
    const {success,fail} = options
    let request = new XMLHttpRequest()
    request.open(method,url)
    request.onreadystatechange=()=>{
        if(request.readyState === 4){
            if(request.status <400){
                success(request.response)
            }else if(request.status >= 400){
                fail(request,request.status)
            }
        }
    }
    request.send()
}

//调用
ajax('get','/2.url',{
    success(request.response){},
    fail(request,requestState){}
})

AJAX 封装 Promise 写法

    ajax(method,url,options)=>{
        return new Promise((resolve,reject){
            let request = new XMLHttpRequest()
            request.open(method,url)
            request.onreadystatechange=()=>{
                if(request.readyState === 4){
                    if(request.status <400){
                        resovle(request.response)
                    }else if(request.status >= 400){
                        reject(resquest)
                    }
                }
            }
            request.send()
        })
    }
return new Promise((resolve,reject)=>{})

课后需要补充

  • axios
  • axios拦截器
Last Modified: September 22, 2020
91