- axios&&fetch
- 目的:是在框架中使用数据请求
- 回顾:
- 封装ajax
- jquery【get post .ajax .load】
- 框架
- 数据请求
- 1.使用原生js提供的fetch
- 2.使用第三方封装库:axios
- 3.fetch vs axios
- axios对已获得的数据进行了一层封装XSRF
- axios底层自动对数据进行了格式化
- fetch并没有进行封装,拿到就是格式化后的数据
- fetch进行了多一层的格式化
- res.json()
- res.blob()格式化二进制
- res.text()
- fetch进行了多一层的格式化
- axios对已获得的数据进行了一层封装XSRF
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';
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
}
})
Fetch
1.get
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
}
})
注意事项:
A: fetch 的 get 请求的参数是直接连接在url上的, 我们可以使用Node.js提供的url或是qureystring模块来将
Object --> String
B: 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 ))
2.post
fetch 文档
https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch#%E8%BF%9B%E8%A1%8C_fetch_%E8%AF%B7%E6%B1%82
fetch项目使用的博客
https://blog.csdn.net/hefeng6500/article/details/81456975
- 历史
- Vue1.0
- Vue1.0数据请求我们使用的是一个第三方的封装库,这个封装库叫做vue-resource
- vue-resource现在已经淘汰了,它的作者也推荐我们使用axios
- vue-resource使用形式合axios一样的
- this.$http.get
- this.$http.post
- this.$http({})
- vue-resource有jsonp方法,而axios是没有的
- Vue2.0
- axios[可以说是目前最好的数据请求的封装库]
- fetch
-
计算属性
computed 是Vue中的一个选项
作用- 业务:如果我想让一个字符串反向,如何实现?
- 分析:反向->数组【reverse】
<div id="app"> <p> { { msg }} </p>
- 业务:如果我想让一个字符串反向,如何实现?