您当前的位置:首页 > 网站建设 > ajax
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax | jQuery | 小程序 |

Ajax常用封装库

51自学网 2022-02-21 10:50:50
  ajax

Axios 是目前应用最为广泛的 AJAX 封装库

Axios的特性有:

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF

使用axios时,需要通过使用script标签引入:https://unpkg.com/axios/dist/axios.min.js
axios的中文网链接:Axios中文网

Axios API

向axios()传递相关配置来创建请求;

  • axios(对象格式的配置选项)
  • axios(url,config)

常用的配置项

  • url:用于请求的服务器URL
  • method:创建请求时使用的方法
  • baseURL:传递相对URL前缀,将自动加在url前面
  • headers:即将被发送的自定义请求头
  • params:即将与请求一起发送的URL参数
  • data:作为请求主体被发送的数据
  • timeout:指定请求超时的毫秒数(0表示无超时时间)
  • responseType:表示服务器响应的数据类型,默认“json”
axios().then(function(response){ //正常请求的响应信息对象response}).catch(function(error){ //捕获的错误})

代码展示如下:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script><script> //使用axios方法    post请求axios({         url:"/pinglun",         method:"post",         baseURL:"http://localhost:3000",         header:{               "Content-Type":"application/json"         },        data:{            "content":"well",            "lyId":4         },    timeout:1000,  }).then(function(res){       console.log(res.data);   }).catch(function(error){       console.log(error);}) </script>

axios 全局默认值的配置

axios.defaults.baseURL = 'https://xxx.xxx.com';axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencode'

axios拦截器:在请求或响应被then或catch处理前拦截它们

axios 的请求拦截器

//axios 的请求拦截器axios.interceptors.request.use(function(config){ //配置项config  config.params = {        id:2 //对配置项中的params进行更改,筛选id=2    }   return config;//要有返回值})    //axios 方法axios("http://localhost:3000/liuyan").then(function(res){      console.log(res.data); }).catch(function(error){      console.log(error);})    //axios 方法axios("http://localhost:3000/pinglun").then(function (res) {    console.log(res.data);}).catch(function (error) {     console.log(error);})//多个axios方法也可以拦截

axios 的响应拦截器

//axios 的响应拦截器axios.interceptors.response.use(function(response){     return(response.data);//response里有很多值,选择data即可})    //axios 方法axios("http://localhost:3000/liuyan").then(function (res) {      console.log(res);//response那里拦截了,已经将数据传成data了}).catch(function (error) {     console.log(error);})

axios的快速请求方法

 axios.get(url[,config])

//axios.get(url[,config])    axios.get("http://localhost:3000/liuyan?id=2") .then(function(res){     console.log(res.data);})    axios.get("http://localhost:3000/liuyan",{   params:{        id:1   }}).then(function(res){    console.log(res.data);})

 axios.post(url[,data[,config]])

//axios.post(url[,data[,config]]) , post请求,添加数据axios.post("http://localhost:3000/users",{    name:"laowang",    age:23,    class:1})

 axios.delete(url[,config])

//axios.delete(url[,config])axios.delete("http://localhost:3000/liuyan",{   params:{         id:5    }})

 axios.put(url[,data[,config]])

//axios.put(url[,data[,config]])axios.put("http://localhost:3000/liuyan",{    name:"wangshisan",    id:11})

XMLHttpRequest2.0,html5对XMLHttpRequest类型全面升级,使其变得更加易用、强大。

onload / onprogress

  XML.onload 事件:只在请求完成时触发

  XML.onprogress 事件:只在请求进行中触发

//xhr.onload事件:只在请求完成时触发//xhr.onprogress事件:只在请求进行中触发var xhr = new XMLHttpRequest();xhr.open("get","http://localhost:3000/pinglun");xhr.onload = function(){     console.log("load:",this.readyState);};xhr.onprogress = function(e){    console.log("progress:",this.readyState);    //在周期性请求过程中,接收到的数据个数     console.log(e.loaded);     //接收数据的总个数     console.log(e.total);}xhr.send(null);

response属性

  以对象的形式表述响应体,其类型取决于responseType的值。根据responseType的值,来通过特定的类型请求数据。

  responseType要在调用open()初始化请求之后,在调用send()发送请求到服务器之前设置才会有效。

//XMLHttpRequest之前的response返回//responseText// responseXmlvar xhr = new XMLHttpRequest();xhr.open("get","http://localhost:3000/pinglun");xhr.onload = function(){  var data = JSON.parse(this.responseText);          console.log(data);   }xhr.send(null);           // xhr2.0新增的response属性 // response// responseTypevar xhr = new XMLHttpRequest();xhr.open("get","http://localhost:3000/liuyan");xhr.responseType = "json";xhr.onload = function(){    console.log(this.response);}xhr.send(null)

以上就是Ajax常用封装库
下载地址:
如何封装一个Ajax函数
ztree+ajax实现文件树下载功能

万事OK自学网:51自学网_软件自学网_CAD自学网自学excel、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。