Ajax Promise Axios

时间  2019-12-05
标签 ajax promise axios 栏目 Ajax 繁體版
原文   原文链接

记录一些前端知识

Ajax

Ajax : Asynchronous·+ XML缩写，可以向服务器额外请求数据而不须卸载页面。Ajax的核心为XMLHttpRequest(XHR)html

建立一个xhr对象

由于IE5是第一款引入XHR对象的浏览器，在IE5中，XHR是经过MSXML库中的ActiveX对象实现的，因此在IE浏览器中，XHR有三个不一样的版本：MSXML2.XMLHttp、MSXML2.XMLHttp.3.0、MSXML2.XMLHttp.6.0<br/>
复制代码
//对于IE7版本以前
function createXHR(){
    if(typeof agruments.callee.activeXString!='string'){
        var versions = ["MSXML2.XMLHttp","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp.6.0"],i,len;
        for(i=0;len = versions.length;i<len;i++){
            try{
                new ActiveXObject(versions[i])
                agruments.callee.activeXString = version[i];
            }catch(ex){
                
            }
        }
    }
    return new ActiveXObject(agruments.callee.activeXString);
}
//对于IE7+、Firefox、Opera、Chrome、Safari支持原生的XHR对象
var xhr = new XMLHttpRequest();
复制代码

总结上面状况前端

function createXHR(){
    if(typeof XMLHttpRequest!='undefined'){
        return new XMLHttpRequest();
    }else if(typeof ActiveXObject!='undefined'){
        if(typeof agruments.callee.activeXString!='string'){
            var versions = ["MSXML2.XMLHttp","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp.6.0"],i,len;
        for(i=0;len = versions.length;i<len;i++){
            try{
                new ActiveXObject(versions[i])
                agruments.callee.activeXString = version[i];
            }catch(ex){
                
            }
        }
    }
    return new ActiveXObject(agruments.callee.activeXString);
    }else{
        throw new Error("No XHR object available");
    }
}
var xhr = createXHR();
复制代码

XHR的用法

（1）open():接受三个参数：请求类型，请求url，是否异步发送请求的布尔值。node

//调用open不会发送请求，只是启动了一个请求以备发送
xhr.open("get",url,false);
复制代码
  • GET：用于获取资源
  • HEAD：与get方法相似，可是不返回message body 内容，返回HTTP头信息
  • POST：向服务器提交数据
  • DELETE：删除资源
  • PUT：与POST类似，可是PUT指定资源存放位置，可是POST由服务器本身决定
  • OPTIONS：用于获取当前URL所支持的方法。若请求成功，则它会在HTTP头中包含一个名为“Allow”的头，值是所支持的方法，如“GET, POST”

（2）send():接受一个参数，做为请求主体发送的数据，若是不须要，则必须传入null。调用send后请求会分派到服务器ios

（3）readyState：表示请求/响应过程的当前活动阶段ajax

0 ：未初始化，没有调用open()方法
1 ：启动，调用open()方法，没有调用send()
2 ：发送，调用send，但没有收到响应
3 ：接收，收到部分响应数据
4 ：完成，接收所有响应数据，并且能够在客户端使用
复制代码

（4）onreadystatechange():由于readyState属性值由一个变成另一个值，都会触发onreadystatechange，能够利用该事件检验readyState的值，必须在open()以前使用json

var xhr = createXHR();
xhr.onreadystatechange = function(){
    if(xhr.readyState ==4){
        if((xhr.status>=200&&xhr.status<300)||xhr.status==304){
            console.log(xhr.reponseText)
        }else{
            console.log("Request was unsuccessful: "+xhr.status);
        }
    }
}
xhr.open("get",url,true);
xhr.send(null);
复制代码

在浏览器收到服务器响应后，响应数据会自动填充到XHR对象的属性中：axios

  • responseText ：做为响应主体被返回的文本
  • responseXML：若是响应的内容类型是“text/xml”或“application/xml”，这个属性中将保存包含着响应数据的XML DOM文档
  • status：响应的HTTP状态
  • statusText：HTTP状态的说明》

(4) Http头部信息后端

  • accept：浏览器可以处理的内容类型
  • accept-charset：浏览器可以显示的字符集
  • accept-encoding：浏览器可以处理的压缩编码
  • accept-language：浏览器当前设置的语言
  • connection：浏览器与服务器之间链接的类型
  • cookie：当前页面设置的任何cookie
  • host：发送请求的页面所在的域
  • referer：发送请求的页面的url
  • user-agent:浏览器的用户代理字符串

使用sendRequestHeader()方法能够设置自定义的请求头部信息，可是必须在open以后send以前使用数组

xhr.open("get",url,true);
xhr.sendRequestHeader("Content-Type","application/x-www-form-unlecoded");
xhr.send(null);
复制代码

(5)超时设定 timeoutpromise

xhr.open("get",url,true);
xhr.sendRequestHeader("Content-Type","application/x-www-form-unlecoded");
xhr.timeout = 1000;
xhr.send(null);
复制代码

优势: 1.无刷新更新数据 2.异步与服务器通讯 3.先后端负载平衡

缺点：1.AJAX干掉了Back和History功能，即对浏览器机制的破坏。 2.AJAX的安全问题。

$.ajax

该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其建立的 XMLHttpRequest 对象。

jQuery.ajax([settings]) 参数：

  • url: 发送请求的地址
  • async 默认值true，为异步请求
  • beforeSend（XHR）：Function 发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。若是返回 false 能够取消本次 ajax 请求
  • cache：默认值: true，dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。
  • contentType：默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。
  • context：这个对象用于设置 Ajax 相关回调函数的上下文。让回调函数内 this 指向这个对象
$.ajax({ url: "test.html", context: document.body, success: function(){
        $(this).addClass("done");
      }})
复制代码
  • data:发送到服务器的数据。将自动转换为请求字符串格式
  • error:请求失败时调用此函数
  • success:请求成功后的回调函数
$.ajax({
             type: "GET",
             url: "test.json",
             data:data,
             dataType: "json",
             success: function(data){},
             error:function(err){}
         });
复制代码

Promise

Promise解决回调地狱问题。

Promise的用法

let promise = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        let rand = Math.random();
        if(rand>0.3){
            resolve("大于0.3: "+rand)
        }else{
            reject("小于0.3: "+rand)
        }
    },1000)
})
复制代码

利用构造函数模式建立一个对象，即promise._proto_ == Promise.prototype为true。

Promise构造函数接收一个函数做为参数，该函数接受两个各位的函数resolve，reject为参数。这两个函数分别表明将当前Promise置为fulfilled(解决)和rejected(拒绝)两个状态。

promise只是Promise的一个实例对象，在声明的时候并不会当即执行,而每个Promise的实例对象都有一个then方法，这个方法就是用来处理以前的异步逻辑的结果。

promise.then(resolve=>{
console.log(resolve)
},reject=>{
    console.log(reject)
})
复制代码

then方法也有两个参数，第一个调用resolve函数，第二个调用reject函， 而且Promise的then()方法，then老是会返回一个Promise实例，由此能够一直then().then()...

catch

这个方法实际上是then方法的一种特例.then(null, rejection)至关于咱们不使用then方法的第一个函数，只是用第二个函数；catch函数比较简单，就是用来捕获以前的then方法里面的异常

var promise = new Promise((res,rej)=>{
    rej("error123456")
});
promise.then(()=>{
    consoel.log(123)
}).catch((err)=>{
    console.log(err)
})
//运行结果error123456
复制代码

Promise.all

Promise.all能够将多个Promise实例包装成一个新的Promise实例。成功的时候返回的是一个结果数组，而失败的时候则返回最早被reject失败状态的值

let p1 = new Promise((res,rej)=>{
    res("success 1");
})
let p2 = new Promise((res,rej)=>{
    res("success 2");
})
let p3 = new Promise((res,rej)=>{
    rej("error");
})

//["success 1", "success 2"]
Promise.all([p1,p2]).then(success=>{
    console.log(success)
}).catch(err=>{
     console.log(err)
})

//["success 1", undefined]
Promise.all([p1,p2.p3]).then(success=>{
    console.log(success)
}).catch(err=>{
     console.log(err)
})

//error
Promise.all([p1,p3,p2]).then((result) => {
  console.log(result)
}).catch((error) => {
  console.log(error)      // 失败了，打出 '失败'
})
复制代码

Promise.race

赛跑，哪一个Promise实例获取结果结果快就返回哪一个,无论结果自己是成功状态仍是失败状态

let p1 = new Promise((res,rej)=>{
    setTimeout(()=>{
        res("success 1");
    },500)
})
let p2 = new Promise((res,rej)=>{
    setTimeout(()=>{
        res("success 2");
    },1000)
})
//success 1
Promise.race([p1,p2]).then((result) => {
  console.log(result)
}).catch((error) => {
  console.log(error)      // 失败了，打出 '失败'
})
复制代码

一个简单的promise的实现

juejin.im/post/5aa786…

ajax+promise

function request( url: String = "", method: String = "GET", data: Object = null, async: Boolean = true, headers: Object = { 'content-type': 'application/x-www-form-urlencoded' }) {
    let xhr = new XMLHttpRequest();
    method = method.toUpperCase();
    xhr.open(method, url, async);
    for (let header in headers) {
        xhr.setRequestHeader(header, headers[header])
    }
    xhr.send(method === "GET" ? null : JSON.stringify(data));
    return new Promise((resolve, reject) => {
        xhr.onreadystatechange = function () {
            if (this.readyState === 4) {
                if (this.status === 200) {
                    resolve(JSON.parse(this.responseText), this)
                } else {
                    let resJson = {code: this.status, response: this.response}
                    reject(resJson, this)
                }
            }
        };
    })
}
复制代码

Axios

Axios 是一个基于 promise 的 HTTP 库，能够用在浏览器和 node.js 中。

使用方法

//get
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
  
  //post
  axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
复制代码

axios + promise

import axios from "axios";

let cancel；
const CancelToken = axios.CancelToken;
//请求拦截器
axios.interceptors.request.use(config => {
//一些操做
    return config
}, error => {
    return Promise.reject(error)
})

//响应拦截器即异常处理
axios.interceptors.response.use(response => {
    return response
}, err => {
    //...一些操做
    return Promise.resolve(err.response)
})
axios.defaults.baseURL = 'XXX'
//设置默认请求头
axios.defaults.headers = {
    'X-Requested-With': 'XMLHttpRequest'
}
axios.defaults.timeout = 10000
export default {
    //get请求
    get(url, param) {
        return new Promise((resolve, reject) => {
            axios({
                method: 'get',
                url,
                params: param,
                cancelToken: new CancelToken(c => {
                    cancel = c
                })
            }).then(res => {
                //能够根据后端返回status作resolve仍是reject
                resolve(res)
            })
        })
    },
    //post请求
    post(url, param) {
        return new Promise((resolve, reject) => {
            axios({
                method: 'post',
                url,
                data: param,
                cancelToken: new CancelToken(c => {
                    cancel = c
                })
            }).then(res => {
                resolve(res)
            })
        })
    }
}

复制代码
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程