axios、fetch两种框架级请求总结

前言：

1、axios和fetch是没有jsonp数据请求类型

2、axios和fetch都是promise

3、axios会对我们请求来的结果进行再一次封装，即提高安全性（因为请求到的数据是裹挟在一个对象中输出的，提取数据还需要进一步操作，因此安全性提高）

4、fetch要手动进行一次数据格式化，但是axios是内部进行的数据格式化

5、fetch中的get方法请求数据，参数直接连接在url上

6、fetch格式化数据有三种处理方法

• .json() 格式化 json 类型数据， 将 json类型 string 转换成 json 对象
• .text() 格式化文本
• .blob() 格式化二进制数据

7、fetch中的post处理

• 设置请求头
• 通过 new URLSearchPrams 来携带参数

8、vue的数据请求的发展

• vue-resource （Vue自己封装的使用的请求类库），但是vue-resource的作者已经放弃更新了

• vue-resource 的作者推荐我们使用axios

• vue-resource 的用法和axios相似度90%以上

• vue-resource 是有jsonp数据请求类型的

• 使用vue-resource是挂载在当前的实例（组件）的$http属性身上的

  举例：this.$http(options)this.$http.get() this.$http.post

一、请求之axios：第三方库（别人封装好的库）

因为是第三方库，所以可以在BootCDN网站上直接引入axios到html文档，引入进axios到html文档中之后，会向全局暴露一个axios对象

1、get方法

示例

	new Vue({
	el:'#app',
	methods:{
        // axios 请求的三种形式
	 		axios.get()          //类似于 --$.get()
        	axios.post()         //类似于---$.post()
            axios(options)       //类似于 -- $.ajax(options)
         // 通常使用 axios（option）    $.ajax(options)
		getData(){   
            var p = axios({
            url:'./data/data.json'
			})
            console.log(p)   //输出的p是Promise对象
		}，
     
        //  第一种 --start  请求的是自己虚拟的数据，即mock数据
        getData(){ 
			axios({
            	url: './data/data.json',
            	method: 'get',  //默认就是get请求
          }).then( res => console.log( res ))
            .catch( error => conosle.log( error ))
		}，
       //  第一种 --end
        
        //  第二种 --start  跨域请求线上数据（某些线上数据是请求不到的）
         get_be_data() {
            axios({
              url: 'https://m.maizuo.com/gateway',
              headers: {
              'X-Client-Info':'{"a":"3000","ch":"1002","v":"5.0.4","e":"15611707829169755178757"}',
              'X-Host': 'mall.film-ticket.film.list'
              },
              params: {
                  cityId: 310100,
                  pageNum: 1,
                  pageSize: 10,
                  type: 1,
                  k: 6035368
              }
              }).then(res => console.log(res))
                .catch(error => console.log(error))
            }
		//  第二种 --end
		//  第三种 --start 请求自己的接口数据,请求PHP文件中的数据，跨域问题由后端解决，后端设置请求头信息（header('Access-Control-Allow-Origin:*');）
	 	get_myself_php_data() {
             axios({
                url: 'http://localhost:8080/get.php',
                params:{
                    a:1,
                    b:2
                }
                }).then(res => console.log(res))
                  .catch(error => console.log(error))
            }
		//  第三种 --end  
		}	
})

back end --后端，BE

font end --前端,FE

2、post方法

npm.js网站上的axios的post方法直接使用会出错

解决方法：

​ 1、先设置请求头

​ 2、实例化URLSearchParams的构造器函数得到params对象

​ 3、使用params对象身上的append方法进行数据的传参

示例

new Vue({
	el:'#app',
	methods:{
        // npmjs网站上的post方法，会有错误，以下为错误示例
        postData() {
                // axios({
                //     url:'http://localhost:8080/get.php',
                //     method:'post',
                //     data:{
                //         a:2,
                //         b:2
                //     }
                // }).then(res => console.log(res))
                // .catch(error => console.log(error))
            },
        // 解决方法示例
        postData(){
            postData() {
                var params = new URLSearchParams()  //得到params对象，用来接收参数
                params.append('a', 2)
                params.append('b', 2)
                axios({
                    url: 'http://localhost:8080/get.php',
                    method: 'post',
                    headers: {   //设置请求头
                        'Content-Type': "application/x-www-form-urlencoded"
                    },
                    data: params
                }).then(res => console.log(res))
                    .catch(error => console.log(error))
            }
        }
    }
    

二、请求之fetch：原生javascript提供

可以当做全局变量使用，是挂载在window对象身上的

1、get方法

示例

fetch中的get方法请求数据，参数直接连接在url上

fetch格式化数据有三种处理方法

• .json() 格式化 json 类型数据， 将 json类型 string 转换成 json 对象
• .text() 格式化文本
• .blob() 格式化二进制数据

new Vue({
     el:'#app',
    methods:{
        getData(){
            fetch('../data/data.json')
            .then(res => res.json())   //对数据进行格式化
            .then(data => console.log(data))   //data是格式化后的数据
            .catch(error =>console.log(error))
        }       
    }
 })

2、post方法

fetch按照官方文档书写post请求也会出错，携带数据出问题

fetch post处理

• 设置请求头
• 通过 new URLSearchPrams 来携带参数

示例

 new Vue({
        el: '#app',
        methods: {
            //错误示例
            
           postData(){
            fetch('http://localhost:8080/get.php',{
                method:'post',
                headers: new Headers({
                        'Content-Type': "application/x-www-form-urlencoded"
                    }),
                body:new URLSearchParams([["a",1],["b",2]]).toString()
            }).then(res => res.text())
            .then(data =>console.log(data))
            .catch(error => console.log(error))
        }
        }