vue基础知识(十)——fetch、axios、async/await
一. fetch概述
1. 基本特性
- 更加简单的数据获取方式，功能更强大、更灵活，可以看做是xhr的升级版
- 基于Promise实现
2. 语法结构
fetch(url).then(fn2)
.then(fn3)
...
.catch(fn)3. fetch的基本用法
通过调用fetch的API——data.text() 来获取数据，但是因为这个API返回的是Promise对象，故而把它return出去，然后在下一个.then 里面获取到真正的数据。
fetch('/abc').then(data=>{
// text()方法属于fetch API的一部分，它返回一个Promise实例对象，用于获取后台返回的数据。
return data.text();
}).then(ret=>{
// 注意这里得到的才是最终的数据
console.log(ret);
});4. fetch请求参数
- 4.1 常用配置选项
- method(String): HTTP请求方法，默认为GET(GET、POST、PUT、DELETE)
- body(String): HTTP的请求参数
- headers(Object): HTTP的请求头，默认为{}
fetch('/abc', {
method: 'get'
}).then(data=>{
return data.text();
}).then(ret=>{
// 注意这里得到的才是最终的数据
console.log(ret);
});- 4.2 GET请求方式的参数传递
（1）方式一：传统方式的URL传递参数 (用 ？ 方式传递参数)
fetch('/abc?id=123').then(data=>{
return data.text();
}).then(ret=>{
console.log(ret);
});
（2）方式二:Restful形式的URL传递参数 (直接用 / 方式传递参数)
fetch('/abc/123',{
method: 'get'
}).then(data=>{
return data.text();
}).then(ret=>{
console.log(ret);
});- 4.3 DELETE请求方式的参数传递
fetch('/abc/123',{
method: 'delete'
}).then(data=>{
return data.text();
}).then(ret=>{
console.log(ret);
});- 4.4 POST请求方式的参数传递
（1）方式一
fetch('/apples',{
method: 'post',
body: 'uname=zly&pwd=123',
headers: {
'Content-Type': 'application/x-www-form-urlencoded', // 请求头headers必须要设置
}
}).then(data=>{
return data.text();
}).then(ret=>{
console.log(ret);
})
（2）方式二
fetch('/apples',{
method: 'post',
body: JSON.stringify({
uname: 'zly',
age: '18'
})
headers: {
'Content-Type': 'application/json', // 请求头headers必须要设置
}
}).then(data=>{
return data.text();
}).then(ret=>{
console.log(ret);
})
- 4.5 PUT请求方式的参数传递
fetch('/apples/123',{ // 查id=123的数据
method: 'put',
body: JSON.stringify({
uname: 'zly',
age: '18'
})
headers: {
'Content-Type': 'application/json', // 请求头headers必须要设置
}
}).then(data=>{
return data.text();
}).then(ret=>{
console.log(ret);
})
5. fetch响应结果
响应数据格式
- text(): 将返回体处理成字符串类型
- json(): 返回结果和JSON.parse(responseText)一样
（1）获取json格式方式一：
fetch('/abc').then(data=>{
// return data.text();
return data.json();
}).then(ret=>{
console.log(ret);
});
（2）获取json格式方式二：
fetch('/abc').then(data=>{
return data.text();
}).then(ret=>{
console.log(ret);
// 利用text()来接收数据，收到的是一个字符串String，这时可通过JSON.parse()来转化一下
var obj = JSON.parse(ret);
console.log(obj.uname, obj,pwd);
});二. axios
1. 基本特性
axios是一个基于Promise用于浏览器和node.js的HTTP客户端。它具有以下特性：
- 支持浏览器和node.js
- 支持promise
- 能拦截请求和响应
- 自动转换JSON数据
2. axios的基本用法
axios.get('/abc').then(ret=>{
// data属性名称是固定的，用于获取后台响应的数据
console.log(ret.data) // ret可以写成其他，ret.data后面的data是固定写法
})3. axios的常用API
- get： 查询数据
- post： 添加数据
- put： 修改数据
- delete：删除数据
4. axios的参数传递
axios对返回的结果进行了封装，它返回的是一个对象，所以我们通常用.data的方式获取数据。
- 4.1 GET传递参数
（1）通过URL传递参数
axios.get('/abc?id=123').then(ret=>{
console.log(ret.data)
})
axios.get('/abc/123').then(ret=>{ //Restful
console.log(ret.data)
})
（2）通过params选项传递参数
axios.get('/abc',{
params: {
id:123
}
})
.then(ret=>{
console.log(ret.data)
})- 4.2 DELETE传递参数
- 参数传递方式与GET类似
axios.delete('/abc?id=123').then(ret=>{
console.log(ret.data)
})
axios.delete('/abc/123').then(ret=>{ //Restful
console.log(ret.data)
})
axios.delete('/abc',{
params: {
id:123
}
})
.then(ret=>{
console.log(ret.data)
})- 4.3 POST传递参数
- 通过选项传递参数（默认传递的是json格式的数据）
axios.post('/abc',{
uname: 'zhou',
pwd: 123
}).then(ret=>{
console.log(ret.data)
})- 通过URLSearchParams传递参数（application/x-www-form-urlencoded）
const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/api/test', params).then(ret=>{
console.log(ret.data)
})
- 4.4 PUT传递参数
- 参数传递方式与POST类似
axios.put('/abc/123',{ // id=123
uname: 'zhou',
pwd: 123
}).then(ret=>{
console.log(ret.data)
})5. axios的响应结果
响应结果的主要属性：
- data：实际响应回来的数据
- headers：响应头信息
- status：响应状态码
- statusText：响应状态信息
6. axios的全局配置
- axios.defaults.timeout = 3000; // 超时时间
- axios.defaults.baseURL = 'http://localhost:3000/app'; // 默认地址
- axios.defaults.headers[ 'mytoken' ] = 'aqwerwqwerqwer2ewewee4eresddd34' // 设置请求头
// 配置请求的基准URL地址
axios.defaults.baseURL = 'http://localhost:3000/';
// 配置请求头信息
axios.defaults.headers['mytoken'] = 'hello';
axios.get('abc').then(ret=>{
console.log(ret.data.uname)
})
// 跨域的请求头需要后台进行配置，如上中的请求头'mytoken'需要后台中允许这个字段才能进行配置7. axios拦截器
- 7.1 请求拦截器
在请求发出之前设置一些信息
//添加一个请求拦截器
axios.interceptors.request.use(function(config){
//在请求发出之前进行一些信息设置
return config;
},function(err){
//处理响应的错误信息
});
axios.interceptors.request.use(function(config){
config.headers.mytoken = 'nihao';
return config;
},function(err){
console.log(err)
});- 7.2 响应拦截器
在获取数据之前对数据做一些加工处理
//添加一个响应拦截器
axios.interceptors.response.use(function(res){
//在这里对返回的数据进行处理
return res;
}),function(err){
//处理响应的错误信息
}
axios.interceptors.response.use(function(res){
// console.log(res)
// return res;
var data = res.data;
return data;
},function(err){
console.log(err)
});三. async/await
1. async/await的基本用法
- async/await是ES7引入的新语法，可以更加方便的进行异步操作
- async关键字用于函数上（async函数的返回值是Promise实例对象）
- await关键字用于async函数当中（await可以得到异步的结果）
（一）
async function queryData(id){
const ret = await axios.get('/data');
return ret;
}
queryData.then(ret=>{
console.log(ret)
})
（二）
axios.default.baseURL = 'http:localhost:3000'
async function queryData(){
var ret = await axios.get('abc');
console.log(ret.data)
return ret.data;
}
queryData();
（三）
//await后面要跟一个Promise实例对象
axios.default.baseURL = 'http:localhost:3000'
async function queryData(){
var ret = await new Promise(function(reslove,reject){
setTimeout(function(){
resolve('zhouzhou')
},1000);
})
return ret;
}
queryData().then(function(data){
console.log(data)
})2. async/await处理多个异步请求
多个异步请求的场景
（一）标准格式
async function queryData(id){
const info = await axios.get('/async1');
const ret = await axios.get('async2?info='+info.data);
return ret;
}
queryData.then(ret=>{
console.log(ret)
})
（二）例子: 用第一个请求的结果作为第二个请求的路径
axios.defaults.baseURL = 'http://localhost:3000';
async function queryData(){
var info = await axios.get('async1');
var ret = await axios.get('async2?info=' + info.data);
return ret.data;
}
queryData().then(function(data){
console.log(data)
})