数据请求
数据请求: axios fetch
-
数据请求的方式
-
原生
- ajax fetch
-
封装
- jq
- vue 1.x vue-resource 弃用 考试
- axios 现如今最好的封装的请求库【 框架项目 】
- axios和vue-resource相似度 98%
1.axios
-
引用:可进入bootcdn引入axios的cdn
-
静态请求:getStatic
getStatic () { // 获取静态数据 // console.log( axios(options) ) // console.log( axios({}) ) // Promise // axios.get() // axios.post() axios({ url: './mock/data/movie.json', method: 'GET' }).then( res => console.log( res )) .catch( error => console.log( error )) }
-
get请求:get
get () { axios .get('http://localhost/get.php',{ params: { a: 1, b: 2 } }) .then( res => console.log( res )) .catch( error => console.log( error )) //或者是 axios({ url: 'http://localhost/get.php', method: 'GET', params: { a: 1, b: 2 } }).then( res => console.log( res )) .catch( error => console.log( error )) }
-
post请求:post
// 以下代码是统一设置post请求的请求头 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; post () { // axios.post('http://localhost/post.php',{ // a: 1, // b: 2 // }).then( res => console.log( res )) // .catch( error => console.log( error )) const params = new URLSearchParams() // params.append(key,value) params.append('a',1) params.append('b',2) axios({ method: 'post', url: 'http://localhost/post.php', data: params }).then( res => console.log( res ) ) .catch( error => console.log( error )) }
-
vue-resource
把上面面的 axios() 换成 this.$http就可以了
但是 vue-resource是有一个方法叫做 jsonp是axios没有的
-
案列
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title> axios数据请求 </title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://cdn.bootcss.com/axios/0.19.0/axios.js"></script> </head> <body> <div id="app"> <div class="container"> <div class="row"> <h3> 静态请求【 模拟数据 】 </h3> <button type="button" class="btn btn-primary" @click = "getStatic" > getJson </button> <hr> <h3> 动态请求 【 真实接口】 </h3> <button type="button" class="btn btn-primary" @click = "get"> get </button> <button type="button" class="btn btn-primary" @click = "post"> post </button> </div> </div> </div> </body> <script src="../../lib/vue.js"></script> <script> /* 引入axios cdn之后我们会得到一个axios的全局变量 */ // 以下代码是统一设置post请求的请求头 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; new Vue({ el: '#app', methods: { getStatic () { // 获取静态数据 // console.log( axios(options) ) // console.log( axios({}) ) // Promise // axios.get() // axios.post() axios({ url: './mock/data/movie.json', method: 'GET' }).then( res => console.log( res )) .catch( error => console.log( error )) }, get () { axios .get('http://localhost/get.php',{ params: { a: 1, b: 2 } }) .then( res => console.log( res )) .catch( error => console.log( error )) axios({ url: 'http://localhost/get.php', method: 'GET', params: { a: 1, b: 2 } }).then( res => console.log( res )) .catch( error => console.log( error )) }, post () { // axios.post('http://localhost/post.php',{ // a: 1, // b: 2 // }).then( res => console.log( res )) // .catch( error => console.log( error )) const params = new URLSearchParams() // params.append(key,value) params.append('a',1) params.append('b',2) axios({ method: 'post', url: 'http://localhost/post.php', data: params }).then( res => console.log( res ) ) .catch( error => console.log( error )) } } }) </script> </html>
2.fetch
-
fetch是原生javascript提供的,我们可以直接向全局变量一样使用
-
fetch也是Promise
-
fetch返回的结果是没有进行封装的,是直接暴露的
-
fetch数据格式化的方式有哪些/
-
json()
-
text()
-
blob() 格式化二进制 【 视频 图像 音频 】
-
post请求有坑
-
案列
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title> fetch </title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> <div id="app"> <div class="container"> <div class="row"> <h3> 静态请求【 模拟数据 】 </h3> <button type="button" class="btn btn-primary" @click="getStatic"> getJson </button> <h3> 动态请求 【 真实接口】 </h3> <button type="button" class="btn btn-primary" @click="get"> get </button> <button type="button" class="btn btn-primary" @click="post"> post </button> </div> </div> </div> </body> <script src="../vue.js"></script> <script> new Vue({ el: '#app', methods: { getStatic() { //使用fetch请求mock数据 fetch('./mock/data/data.json') .then(res => res.json()) // 数据格式化 .then(data => console.log(data)) // 获取数据格式化的数据 .catch(error => console.log(error)) // 错误捕获 }, get() { //使用fetch请求动态数据 get fetch('http://localhost/get.php?a=1&b=2') .then(res => res.text()) // 数据格式化 .then(data => console.log(data)) // 获取数据格式化的数据 .catch(error => console.log(error)) // 错误捕获 }, post() { // 使用post请求动态数据 fetch('http://localhost/post.php', { method: 'POST', // or 'PUT' body: new URLSearchParams([['a', 1], ['b', 2]]).toString(), headers: new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' }) }).then(res => res.text()) .catch(error => console.error('Error:', error)) .then(response => console.log('Success:', response)); } } }) </script> </html>
3.总结
-
axios vs fetch post请求都是有一些问题的
-
处理方式
- 先设置请求头
- 通过 new URLSearchParams来进行传参