前端之Ajax

Ajax原理

var xhr=new XMLHttpRequest();
    xhr.open(method,url,true);
    xhr.send();
    xhr.onreadstatechange=function(){
        if(xhr.readyState === 4 &&xhr.Status === 200){
            xhr.responsText
        }
    }

拦截器

//前端向服务器发请求axios封装
import axios from "axios"
//利用axios.create
//明确，当生产环境发请求是就要路径前面加api，打包上线之后，访问的是自己的静态资源目录，所以不需要重写路径。
//判断环境的语法是
console.log(process.env.NODE_ENV);
//基础配置
const service=axios.create({
  //请求超过5s返回4040
  timeout:5000,
  //判断生产和开发环境。是否需要重写路径
  baseURL:process.env.NODE_ENV === 'development' ? '/api' : ''
})
//请求头的拦截
let arr=JSON.parse(localStorage.getItem("item"))
let token=arr[arr.length-1].token

service.interceptors.request.use(
config => {
  if (token) {
      //在请求时设置请求头
    config.headers["token"] = token
  }
  return config
},
error => {
  console.log(error); // for debug
  return Promise.reject(error)
}
);
//响应头的设置
service.interceptors.response.use(function (res) {

  return res.data;
},function (error) {
  //400
  //500
  //404
  return Promise.reject(error);
});

export default service;

axios同步变异步

function getData(method,url,callback){
  var xhr=new XMLHttpRequest();
  xhr.open(method,url,true);
  xhr.send();
  xhr.onreadstatechange=function(){
       if(xhr.readyState === 4 &&xhr.Status === 200){
         callbcak&&callback( xhr.responsText);
      }
  }
  }
 getData('get','http:www.baidu.com/web/123.json',function(data){

 })
 function A(name,age){
     this.name=name;
     this.age=age;

 };//类；
var a1=new A('tim',12);
//创建一个对象；空对象；
//因为空对象没属性，所以使用自身的隐式原型—__proto__指向父类；但是父类的属性是私有不开放的，所以父类就在创建的时候
//利用自身的属性prototype创建一个一模一样的对象叫做原型对象；这个原型对象是开放的；
//于是实例就从原型对象中获取了父类的全部属性和方法；
A.prototype.myEach=function(callback){
  for(var i=0;i<this.length;i++){
      callback&&callback(this[i],i)
  }
}
var arr=[2,3,4,5]
arr.myEach(function(item,index){
  console.log(item)
})
A.prototype.myMap=function(callback){
  var brr=[];
  for(var i=0;i<this.length;i++){
      brr.push( callback&&callback(this[i],i))
  }
  return brr;
}
arr.map(function(item,index))
var res=arr.map(function(item,index){
  return item
})