anxios和fetch数据请求
anxios
- 使用别人封装好的第三方库：目前最流行的，使用率最高的是 axios
- axios得到的结果会进行一层封装，而fetch会直接得到结果
axios
{data: 3, status: 200, statusText: "OK", headers: {…}, config: {…}, …}
config: {adapter: ƒ, transformRequest: {…}, transformResponse: {…}, timeout: 0, xsrfCookieName: "XSRF-TOKEN", …}
data: 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
anxios get方式
注意：anxios返回的是promise对象
案例如下：
//这里引用了bootstrap
//html文件如下：
<div id="app">
<div class="container">
<div class="row">
格式如下：axios.get(url).then(res=>console.log(res).catch(error=>conosle.log(error))
new Vue({
el:'#app',
methods:{
------------方法1-----------------
get(){
var p = axios.get('localhost/php/get.php?a=1&&b=1');//参数直接放在url后面
p
.then( res => console.log(res))
.catch( e => {
if(e) throw e
})
}
----------方法2--------------
get(){
anxios({
url:'localhost/php/get.php',
method:'get',//默认是get请求，可以省略
params:{ //params中跟着的是get请求的参数
a:1,
b:1
}
})
.then( res => console.log(res))
.catch( e => {
if(e) throw e
})
}
}
})
anxios post方式
注意：anxios返回的是promise对象
- 解决步骤：
- 1.先设置请求头
- 2.实例化 URLSearchParams的构造器函数得到params对象
- 3.使用params对象身上的append方法进行数据的传参
案例如下：
//这里引用了bootstrap
//html文件如下：
<div id="app">
<div class="container">
<div class="row">
new Vue({
el:'#app',
methods:{
post(){
let params = new URLSearchParams();
params.append('a',5);//传参
params.append('b',5);
anxios({
url:'localhost/php/post.php',
method:'post',
data:params,
headers:{
'Content-Type': "application/x-www-form-urlencoded"
}
})
.then( res => {console.log(res)})
.catch( e => {
if(e) throw e
})
}
}
})
fetch数据请求
注意fetch返回的是一个promise对象
- A: fetch 的 get 请求的参数是直接连接在url上的，我们可以使用Node.js提供的url或是qureystring模块中的querystring.stringify方法来实现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 ))
- 案例如下：
//html文件如下：
<div id="app">
<div class="container">
<div class="row">
- fethch get方式请求数据
new Vue({
el:'#app',
methods:{
get(){
fetch('http://localhost/get.php?a=1&b=2')
.then( res => res.text())//对数据进行格式化 res.json() res.blob()
.then( data => console.log(data)
.catch( e => {
if(e) throw e;
})
}
}
})
- fethch post方式请求数据
new Vue({
el:'#app',
methods:{
post(){
var fetch_post = fetch('http://localhost/post.php',{
method:'post',
headers: new Headers({//解决跨域
'Content-Type': "application/x-www-form-urlencoded"
}),
body: new URLSearchParams([ // 进行参数的修改
['a',1],
['b',1]
]).toString()
})
.then( res => res.text())
.then( data => console.log(data))
.catch(e =>{
if(e) throw e
})
}
}
})
- fethch 请求json数据
new Vue({
el:'#app',
methods:{
json(){
fetch('./data/data.json')
.then( res => res.json())
.then( data => console.log(data))
.catch(errpr => {
if(error) throw error
})
}
}
})