前端框架级之数据请求的axios和fetch用法
前端框架级之数据请求的axios和fetch用法
此之前,看到了Vue,了解到了前端的3种框架级的数据请求方法:
-
axios(第三方库)
-
fetch(js原生)
-
Vue.resource(这是Vue自己封装使用的类库,但比较久以前,其作者就已经放弃更新了,Vue.resource的用法和axios相似度很高 >90%,Vue2.0基本上用的都是前两者了,Vue.resource有jsonp的用法,前两者没有)。
axios:
axios在引入CDN之后就会暴露一个axios的全局对象
-
axios的get方法:
-
axios的post方法:
-
注意: axios中post请求如果你直接使用npmjs.com官网文档, 有问题
解决步骤:
1. 先设置请求头
2. 实例化 URLSearchParams的构造器函数得到 params对象
3. 使用params对象身上的append方法进行数据的传参
-
// 统一设置请求头 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; 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 ) }) .catch( error => { if( error ){ throw error } })
//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 } })
fetch:
fetch是原生javascript提供的 , 所以它 可以当做全局变量使用 ,它是挂载在window对象身上的。
get方法:
注意事项:
A: fetch 的 get 请求的参数是直接连接在url上的, 我们可以使用Node.js提供的url或是qureystring模块来将
Object --> String
B: fetch 的请求返回的是Promise对象,所以我们可以使用.then().catch(),但是要记住.then()至少要写两个, 第一个then是用来格式化数据的,第二个then是可以拿到格式化后的数据
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 } })
post方法:
fetch( 'http://localhost/post.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 )) }
post详情方法可以参考:
1、https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch#进行_fetch_请求
- vue 之 数据请求----axios以及fetch的用法
- vue中使用vue-resource、axios、fetch-jsonp请求数据
- vue数据请求(axios--fetch)
- 前端数据请求:axios vs fetch
- 数据请求之axios和fetch
- Vue数据请求 axios和fetch
- webpack4.0.1_vue脚手架的项目与json-server结合,vue开发前端时用json-server模拟数据,fetch的请求代码
- Vue数据请求 axios vs fetch
- vue 使用 axios 发 post 请求,后台无法接收到数据
- Axios数据请求post与node进行传参,node中处理json
- 数据请求在前端开发中使用的两种形式(post & get)
- 解决SpringMVC接收不到axios发送post请求的数据问题
- vue-cli2.x简单的跨域请求demo(fetch、axios、proxyTable)
- 关于vuejs 2.9版本的axios请求数据问题
- 解决用axios发送请求,后台接收不到请求数据的问题
- vue项目axios请求之qs的用法
- axios发送post请求,提交表单数据
- vue axios数据请求及vue中使用axios的方法
- Mock.js生成随机数据,拦截 Ajax 请求,让前端独立于后端进行开发
- 前端通过Ajax请求从后台返回数据到页面显示,实现分页功能