ajax 关于axios原生代码的写法

知识点

所用以下知识点：

0.1 Promise  作用：状态条件判断

0.2 XMLHttpRequest  作用：发送接受请求

0.3 toUpperCase 作用：字符串转化为大写

0.4 URLSearchParams  作用：对象与key=value格式间的转换 

语法

<script>
    function myAxios({method='get',url,params,data}) {
    
    return new Promise(function(resolve, reject) {
      const xhr = new XMLHttpRequest();

      // toUpperCase转化method为大写，保证得到的数据一致，好进行条件判断
      if (method.toUpperCase() === 'GET') {
        xhr.open('GET', url+'?'+new URLSearchParams(params).toString())
        xhr.send();
      }else{
        xhr.open('post', url)
        //数据类型判断
        xhr.setRequestHeader('Content-Type','application/json')
        //转化为JSON字符串
        xhr.send(JSON.stringify(data));
      }
      xhr.onload = function(){
        //JSON字符串转化为数组
        resolve(JSON.parse(xhr.responseText))
      }
    })
    }


      //调用
   myAxios({
      method:'GET',
      url:'http://...',
      params:{spoken:'love you'},//get请求的参数写在这里面
      // data:{}  poet的请求参数
    }).then(function(res){
      console.log(res.data.info.text)
    })
</script>

总结

与实例化的方法相类似，先new一个实例化对象，再传参调用。

注：JSON字符串可以在不同的编程语言中使用调用，别的数据类型不能。所以，涉及不同语言间的请求响应，需要转化成JSON字符串。