ajax以及相关的封装

简介

ajax，也就是异步JavaScript和XML技术，主要目的就是完成前后端交互而不刷新页面，实现异步效果。

基础操作

function loadXMLDoc() {
  //1.创建XHR对象
  var xhttp = new XMLHttpRequest();
  //2.编写回调函数，说明请求后续操作
  xhttp.onreadystatechange = function() {
    //3.根据不同的状态进行不同操作
    if (this.readyState == 4 && this.status == 200) {
    	myFunction(this);
    }
  };
  //4.设置请求参数
  xhttp.open("GET", "cd_catalog.xml", true);//type，url，async
  //5.发送请求
  xhttp.send();
}

总的来说挺简单，需要记住一些参数，abort可以终止请求

状态参数

readyState

0	1	2	3	4
请求未初始化	服务器连接已建立	请求已接收	请求处理中	请求已完成，且响应已就绪

status

200	404
OK	未找到页面

HTTP状态码

额外说一说状态码

1XX：通知，这个很少见到，

2XX：成功，其中200最常见，代表成功，从200到206都是一些重要程度的变化。当强缓存命中时，也会放回200，哪怕根本没有发送请求

3XX：重定向，这个也常见，主要用于缓存，304最常见，当协商缓存命中时，会返回304（不同浏览器可能不一样）

4XX：客户端错误，常见的就是404，一般指url无资源，而403指被请求禁止

5XX：服务端出错，常见的是502，服务器代理有问题

Ajax封装

就如同jquery对ajax进行了封装，省略了很多繁琐的对象创建操作，我们日常使用，也是需要进行封装的，便于管理。

function ajax(url,data,method,success){
	var XHR=new XMLHttpRequest();
	if(method=='get'){
		if(data){
			url+='?';
			url+=data;
		}
		XHR.open(method,url);
		XHR.send();
	}else{
		XHR.open(method,url);
		XHR.setRequestHeader("Content-type","x-www-form-urlencoded");
		if(data){
			XHR.send(data);
		}else{
			XHR.send();
		}
	}
	XHR.onreadystatechange=function(){
		if(XHR.readyState==4&&ajax.status==200){
			console.log(XHR.responseText);
			success(XHR.responseText);
		}
	}
}

Axios封装

import axios from 'axios'

//封装ajax
export default function ajax(url='',params={},type='GET'){
  let promise;
  return new Promise(((resolve, reject) => {
    //1.判断请求方式
    if ('GET'===type){
      //1.1拼接字符串
      let str = '';
      Object.keys(params).forEach((value,index) => {
        if (index+1===Object.keys(params).length){
          str+=value+'='+params[value];
        }else{
          str+=value+'='+params[value]+'&';
        }
      });
      //1.2完整路径
      url+='?'+str;
      //1.3发送get请求
      promise = axios.get(url);
    }else if('POST'===type){
      //1.3发送post请求
      promise = axios.post(url,params);
    }
    //2.返回请求结果
    promise.then((response)=>{
      resolve(response.data);
    }).catch((error)=>{
      reject(error);
    });
  }))
}