Vue全家桶-前后端交互2

2.6 Promise 常用的 API      
  1. 实例方法 
     * p.then() 得到异步任务的正确结果
     * p.catch() 获取异常信息
     * p.finally() 成功与否都会执行(尚且不是正式标准)
  2.对象方法
     * Promise.all() 并发处理多个异步任务,所有任务都执行完成才能得到结果
         var p1 = queryData('http://localhost:3000/a1')
         var p2 = queryData('http://localhost:3000/a2')
         var p3 = queryData('http://localhost:3000/a3')
        Promise.all([p1,p2,p3]).then((result)=>{
            console.log(result)
        });
     * Promise.race() 并发处理多个异步任务,只要有一个任务完成就能得到结果
         Promise.race([p1,p2,p3]).then((result)=>{
             console.log(result)
         });

3.使用fetch进行接口调用
3.1 fetch 概述
1.基本特性
* 更加简单的数据获取方式,功能更强大,更灵活,可以看做是xhr的升级版
* 基于Promise实现
2.语法结构
fetch(url).then(fn2)
.then(fn3)
…
.catch(fn)
3.2 fetch 的基本用法
fetch(’/abc’).then(data=>{
return data.text();
// text() 方法属于fetch API的一部分,它返回一个Promise实例对象,用于获取后台返回的数据
}).then(ret=>{
// 注意这里得到的才是最终的数据
console.log(ret)
});
3.3 fetch请求参数
1.常用配置选项
* method(String):HTTP请求方式,默认为GET(GET. POST. PUT. DELETE)
* body(String):HTTP请求参数
* headers(Object):HTTP的请求头,默认为{}
2.GET请求方式的参数传递
// 传统方式
fetch(’/abc?id=123’,{
method:‘get’
}).then(data=>{
return data.text();
}).then(ret=>{
console.log(ret)
});
// Restful 方式
fetch(’/abc/123’,{
method:‘get’
}).then(data=>{
return data.text();
}).then(ret=>{
console.log(ret)
});
3. DELETE请求方式的参数传递
fetch(’/abc/123’,{
method:‘delete’
}).then(data=>{
return data.text();
}).then(ret=>{
// 注意这里得到的才是最终的数据
console.log(ret)
});
4.POST请求方式的参数传递
fetch(’/books’,{
method:‘post’,
body:‘uname=lisi&pwd:123’,
headers:{
‘Content-Type’:‘application/x-www-form-urlencoded’
}
}).then(data=>{
return data.text();
}).then(ret=>{
// 注意这里得到的才是最终的数据
console.log(ret)
});
// 设置json格式的 body需要转换成字符串 (JSON.stringfy)
fetch(’/books’,{
method:‘post’,
body:JSON.stringfy({
uname:‘lisi’,
age:12
})
headers:{
‘Content-Type’:‘application/json’
}
}).then(data=>{
return data.text();
}).then(ret=>{
// 注意这里得到的才是最终的数据
console.log(ret)
});
5.PUT请求参数传递 一般用于修改数据
fetch(‘books/123’,{
method:‘put’,
body:JSON.stringfy({
uname:‘lisi’,
age:12
})
header:{
‘Content-Type’:‘application/json’,
}
}).then(data=>{
return data.text();
}).then(ret=>{
// 注意这里得到的才是最终的数据
console.log(ret)
});
3.4 fetch响应结果
响应数据格式
* text() :将返回体处理成字符串类型
* json() :返回结果JSON.parse(responseText)一样
fetch(’/abc’).then(data=>{
// return data.text();
return data.json();
}).then(ret=>{
console.log(ret)
})

4.使用axios进行接口调用
4.1 axios 的基本特性
axios 是一个基于Promise用于浏览器和node.js的HTTP客户端
特征:
* 支持浏览器和node.js
* 支持promise
* 能拦截请求和响应
* 自动转换JSON数据
4.2 用法:
axios.get(’/adata’).then(ret=>{
//data属性名称是固定的,用于获取后台响应的数据
console.log(ret.data)
})
4.3 axios 的常用API
* get: 查询参数
通过URL传递参数
axios.get(’/adata?id=123’).then(ret=>{
console.log(ret.data)
});
axios.get(’/adata/123’).then(ret=>{
console.log(ret.data)
});
通过params选项
axios.get(’/adata’,{
params:{
id:123
}
}).then(ret=>{
console.log(ret.data)
});
* post: 添加参数
* 通过选项传递参数(默认传递的是json格式的数据)
axios.post(’/adata’,{
uname:‘tom’,
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)
})
* put: 修改参数
* 参数传递与POST类似
axios.put(’/adata/123’,{
uname:‘tom’,
pwd:123
}).then(ret=>{
console.log(ret.data)
})
* delete: 删除参数
传递参数与GET类似
axios.delete(’/adata?id=123’).then(ret=>{
console.log(ret.data)
});
axios.delete(’/adata/123’).then(ret=>{
console.log(ret.data)
});
axios.delete(’/adata’,{
params:{
id:123
}
}).then(ret=>{
console.log(ret.data)
});
4.4 axios 的响应结果
响应结果的主要属性:
data : 实际响应回来的数据
headers: 响应头信息
status: 响应状态码
statusText: 响应状态信息
axios.post(’/axios-json’).then(ret=>{
console.log(ret.data)
});
4.5 axios 的全局配置
axios.defaults.timeout=3000; // 超时时间
axios.defaults.baseURl=‘http://localhost:3000/app’; //默认地址
axios.defaults.headers[‘mytoken’] = ‘aqwer1fasfas13’ // 设置请求头
4.6 axios 拦截器
1.请求拦截器
在请求发出之前设置一些信息
// 添加一个请求拦截器
axios.interceptors.request.use(config=>{
//在请求发出之前进行一些信息设置
return config;
},err=>{
//处理响应的错误信息
});
2. 响应拦截器
在获取数据之前对数据做一些加工处理
// 添加一个请求拦截器
axios.interceptors.response.use(res=>{
//在请求发出之前进行一些信息设置
return res;
},err=>{
//处理响应的错误信息
});
5.使用async/await 方式调用接口
异步函数
async关键字
在普通函数前面加上async关键字,变成异步函数
异步函数的返回值会被包装成一个Promise实例
return 正确的结果
throw 传递错误的结果
* await 关键字
后面一般跟Promise实例
可以阻塞后续的代码执行,等待Promise实例返回结果
可以直接拿到Promise实例的正确结果 错误的用try—catch
async作为一个关键字放到函数前面
任何一个async函数都会隐式返回一个promise
await关键字只能在使用async定义的函数中使用
await后面可以直接跟一个Promise实例对象
await函数不能单独使用
async/await让异步代码看起来 表现起来更像同步代码

  `async function queryData(){
      var ret = await new Promise(function(resolve,reject){
          setTimeout(function(){
              resolve('nihao')
          },1000);
      })
      // console.log(ret.data)
      return ret;
  };
  `
  // 任何一个async 函数都会隐式返回一个promise 我们可以使用then 进行链式编程
  queryData().then(function(data){
      console.log(data)
  });
  // async 函数处理多个异步函数
    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)
    })