var request = new XMLHttpRequest(); // 创建XMLHttpRequest对象
//ajax是异步的，设置回调函数
request.onreadystatechange = function () { // 状态发生变化时，函数被回调
    if (request.readyState === 4) { // 成功完成
        // 判断响应状态码
        if (request.status === 200) {
            // 成功，通过responseText拿到响应的文本:
            return success(request.responseText);
        } else {
            // 失败，根据响应码判断失败原因:
            return fail(request.status);
        }
    } else {
        // HTTP请求还在继续...
    }
}
// 发送请求:
request.open('GET', '/api/categories');
request.setRequestHeader("Content-Type", "application/json") //设置请求头
request.send();//到这一步，请求才正式发出

//执行GET请求
import axios from 'axios'
axios.default.baseURL = 'http://localhost:3000/api/products'
axios.get('/user?ID=12345')  //返回的是一个Promise
    .then(res=>console.log(res))
    .catch(err=>console.log(err));

//可配置参数的方式
axios.get('/user',{
    params:{
        ID:12345
    }
}).then(res=>console.log(res))
    .catch(err=>console.log(err));


//发送post请求
axios.post('/user',{
    firstName: 'simon',
    lastName:'li'
}).then(res=>console.log(res))
    .catch(err=>console.log(err));



2222222222222222

var baseURL = "http://localhost:8080"
function getUserInfo() {
return axios.get(baseURL + '/user/getUserInfo?userId=1');
}

function getUserDetail() {
return axios.get(baseURL + '/user/getUserDetail?userId=1');
}

axios.all([getUserInfo(), getUserDetail()])
.then(axios.spread(function (userInfo, userDetail) {
// 两个请求现在都执行完成
......
}));

//发送多个请求(并发请求)，类似于promise.all，若一个请求出错，那就会停止请求
const get1 = axios.get('/user/12345');
const get2 = axios.get('/user/12345/permission');
axios.all([get1,get2])
    .then(axios.spread((res1,res2)=>{
        console.log(res1,res2);
    }))
    .catch(err=>console.log(err))

const instance = axios.create({
    baseURL: 'http://localhost:3000/api/products',
    timeout: 1000,
    headers: {'X-Custom-Header':'foobar'}
});
//instance的使用
instance.get('/user',{
    params:{ID:12345}
}).then(res=>console.log(res))
.catch(err=>console.log(err))

{
    //服务器的地址，是必须的选项
    url: '/user',
        
    //请求的方式，若没有则默认是get
    method:'get',
        
    //如果url不是绝对地址，则会加上baseURL
    baseURL: 'http://localhost:3000/',
       
    //transformRequest允许请求的数据在发送至服务器之前进行处理，这个属性只适用于put、post、patch方式
    //数组的最后一个函数必须返回一个字符串或者一个'ArrayBuffer'或'Stream'或'Buffer' 实例或'ArrayBuffer'，'Formdata'，
    //若函数中用到了headers，则需要设置headers属性    
    transformRequest: [function(data,headers){
        //根据需求对数据进行处理
        return data;
    }],    
    
    //transformResponse允许对返回的数据传入then/catch之前进行处理    
    transformResponse:[function(data){
        //依需要对数据进行处理
        return data;
    }],   
    
    //headers是自定义的要被发送的信息头
    headers: {'X-Requested-with':'XMLHttpRequest'},
        
    //params是请求连接中的请求参数，必须是一个纯对象
    params:{
      ID:12345  
    },    
    
    //paramsSerializer用于序列化参数
    paramsSerializer: function(params){
      return Qs.stringify(params,{arrayFormat:'brackets'});  
    },     
    
    //data是请求时作为请求体的数据——request.body
    //只适用于put、post、patch请求方法
    //浏览器:FormData，File，Blob;Node:stream
    data:{
      firstName: 'simon',  
    },    
    
    //timeout定义请求的时间，单位是毫秒，如果请求时间超过设定时间，请求将停止
    timeout:1000,
        
    //withCredentials表明跨跨域请求书否需要证明。
    withCredentials:false, //默认值
        
    //adapter适配器，允许自定义处理请求
    //返回一个promise
    adapter:function(config){
        /*...*/
    },    
     
    //auth表明HTTP基础的认证应该被使用，并提供证书
    auth:{
      username:'simon',
      password:'123456',    
    },    
    
    //responseType表明服务器返回的数据类型，这些类型包括：json/blob/document/         arraybuffer/text/stream    
     responseType: 'json',   
         
     //proxy定义服务器的主机名和端口号
     //auth属性表明HTTP基本认证应该跟proxy相连接，并提供证书
     //这将设置一个'Proxy-Authorization'头(header)，覆盖原来自定义的
     proxy:{
         host:127.0.0.1,
         port:8080,
         auth:{
             username:'simon',
             password:'123456'    
         }    
     },   
     
     //取消请求
     cancelToken: new CancelToken(cancel=>{})    
}

//添加一个请求拦截器
axios.interceptors.request.use(config=>{
    //在请求之前做一些事
    return config;
},err=>{
   //请求错误的时候做一些事
    return Promise.reject(err);
});

//添加一个响应拦截器
axios.interceptors.response.use(response=>{
    //对返回的数据做一些处理
    reutrn response;
},err=>{
   //对返回的错误做一些处理
    return Promise.reject(err);
});


//移除拦截器
const myInterceptor = axios.interceptors.request.use(config=>{return cofig})
axios.interceptors.request.eject(myInterceptor);

//在一个axios实例中使用拦截器
var instance = axios.create();
instance.interceptors.request.use(function(){/*...*/});

1=配置文件如下

2-封装request.js
import { BASE_URL } from "../config/conster";//导入配置文件
import axios from "axios";
var instance = axios.create({
  baseURL: BASE_URL,
  timeout: 1000,
  headers: { "Content-Type": "application/json" },
});

// 添加请求拦截器
instance.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    return config;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
instance.interceptors.response.use(
  function (response) {
    // 对响应数据做点什么
    return response;
  },
  function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

export let $get = async (url, params) => {
  let { data } = await instance.get(url, { params });
  return data;
};
export let $post = async (url, params) => {
  let { data } = await instance.post(url, params);
  return data;
};
export let $put = async (url, params) => {
  let { data } = await instance.put(url, params);
  return data;
};
export let $delete = async (url) => {
  let { data } = await instance.delete(url);
  return data;
};



3-请求数据