前端数据请求：axios vs fetch

首先我们知道数据请求的类型有：

		  get ， post，head， put，delete，option，...等等

数据请求在前端开发中的使用有两种形式

1. 使用原生javascript提供的数据请求：

   1. ajax( 四部曲，一般需要我们结合Promise去封装，使用不是很便利，但是效率很高 )

       //四部曲：
       //1.创建ajax对象
       var request = new XMLHttpRequest();
   
       //2.ajax的open方法
       request.open("get", "http://10.0.152.17/AJAX/ajaxtest", true);   
       /* 
           1.第一个参数：GET/POST请求数据--默认GET方法,
           2.open的第二个参数：接口地址
           3.open的第三个参数：是否异步     为true时，服务器请求异步进行
       */ 
   
       //3. ajax的send方法     就绪状态码：就绪状态--0(初始化) 1(请求建立) 2(发送完成) 3(解析) 4(完成)
       request.send( )
   
       //4 设置回调函数
       request.onreadystatechange = function(){
           if(request.readyState == 4 && ajax.status==200) {
           }
       }
   

   2. fetch( 本身结合了Promise,并且已经做好了封装，可以直接使用 )

2. 使用别人封装好的第三方库：
   目前最流行的，使用率最高的是 axios

vue中我们最常使用的

1. vue 1.x 的版本提供了一个封装库 vue-resource , 但是到了vue 2.x版本之后，这个就弃用了
   - vue-resource使用方法和 axios 相似度在 95%
   - vue-resouce有jsonp方法，但是axios是没有的
2. vue2.x版本我们最用使用的数据请求是 axios 和 fetch

axios vs fetch

1. axios需要通过script标签引入到自己的代码之中，而fetch是原生的一种方式,并且在js已经帮我们封装好了可直接使用。

<script src="https://cdn.bootcss.com/axios/0.18.0/axios.js"></script>

2. axios和fetch返回的都是Promise对象，所以可以调用then和catch方法

            var p = axios.get()
            console.log( p ) // Promise

3. axios得到的结果会进行一层封装，而fetch会直接得到结果

 //axios方式获取到的数据:
{data: 3, status: 200, statusText: "OK", headers: {…}, config: {…}, …}
      config: {adapter: ƒ, transformRequest: {…}, transformResponse: {…}, timeout: 0, xsrfCookieName: "XSRF-TOKEN", …}
      data: 3   //这就是获取到的数据  同下方3
      headers: {content-type: "text/html; charset=UTF-8"}
      request: XMLHttpRequest {onreadystatechange: ƒ, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
      status: 200
      statusText: "OK"
      __proto__: Object
 //fetch方式获取到的数据：
     3   //同上方的data中的值  直接就会得到结果

因此：axios会比fetch的安全性更高一些。

Axios总结

1. get方法

        // A: 无参数
            axios.get(url)
                        .then(res=>console.log(res))
                        .catch(error=>conosle.log(error))
        // B: 有参数
            axios({
                url: 'http://xxx',
                method: 'get'   //默认就是get,这个可以省略，
                params: {
                    key: value
                }
            })

2. post方法
   在这里要注意： axios中post请求如果你直接使用npmjs.com官网文档， 会有坑
   解决步骤：
   1. 先设置请求头
   2. 实例化 URLSearchParams的构造器函数得到params对象
   3. 使用params对象身上的append方法进行数据的传参
   代码如下 ：

// 统一设置请求头||单独设置请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

// 实例化 URLSearchParams的构造器函数得到params对象
let params = new URLSearchParams()

// params.append(key,value) 数据的传参
params.append('a',1)
params.append('b',2)

axios({
    url: 'http://localhost/post.php',
    method: 'post',
    data: params，
    headers: {  //**单个请求设置请求头**
       'Content-Type': "application/x-www-form-urlencoded"
    }
})
    .then(res => console.log( res ))//es6中一行书写可省略花括号
    .catch( error => {
        if( error )throw error
    })

Fetch总结

1. get
   fetch提供第二个参数，用来传递一些初始化的信息

//1
   fetch('https://www.baidu.com/search/error.html', {
    method: 'GET'
  	})
	  .then((res)=>{
	    return res.text()
	  })
	  .then((res)=>{
	    console.log(res)
	  })
//2
	fetch('http://localhost/get.php?a=1&b=2')
        .then(res=> res.text()) // 数据格式化 res.json() res.blob()
        .then(data => console.log( data ))
        .catch(error => {
            if( error ) throw error
        })

• 注意事项：
  1. fetch 的 get 请求的参数是直接连接在url上的， 我们可以使用Node.js提供的url或是qureystring模块来将：Object --> String
  2. fetch 的请求返回的是Promise对象，所以我们可以使用.then().catch(),但是要记住.then()至少要写两个， 第一个then是用来格式化数据的，第二个then是可以拿到格式化后的数据
     格式化处理方式有

  fetch('./data.json')
      .then(res=>{
          res.json() //res.text() res.blob()**（在这）
      })
      .then( data => console.log(data))
      .catch( error => console.log( error ))
  

3. post
   fetch文档 --官方说明
   与GET请求类似，POST请求的指定也是在fetch的第二个参数中：

fetch('https://www.baidu.com/search/error.html', {
    method: 'POST' // 指定是POST请求
  })
  .then((res)=>{
    return res.text()
  })
  .then((res)=>{
    console.log(res)
  })

POST请求参数的传递
众所周知，POST请求的参数，不能放在URL中，目的是防止信息泄露。

fetch('https://www.baidu.com/search/error.html', {
    method: 'POST',
    body: new URLSearchParams([["foo", 1],["bar", 2]]).toString() // 这里是请求对象
  })
	  .then((res)=>{
	    return res.text()
	  })
	  .then((res)=>{
	    console.log(res)
	  })

完。