Vue2入门五：前后端交互-Promise、fetch、axios和async/awai使用

合集 - Vue(9)

1.Vue2笔记2024-05-28 2.Vue2入门一：基础概念2020-12-19 3.Vue2入门二：组件化开发-组件与实例2020-12-19 4.Vue2入门三：node、npm&Vue脚手架（安装vue2/vue3）&ESlint2020-12-23 5.Vue2入门四：vuex2021-02-20

6.Vue2入门五：前后端交互-Promise、fetch、axios和async/awai使用2021-02-28

7.Vue2入门六：前端路由-Vue Router2021-03-01 8.Vue2入门七：前端工程化（前端模块化）2021-03-04 9.Vue3笔记2024-06-09

1、promise

Promise是异步编程的一种解决方案，从语法上讲，Promise是一个对象，从它可以获得异步操作的消息。

使用Promise主要有以下好处：

①可以避免多层异步调用嵌套问题（回调地狱）

②promise对象提供了简洁的api，使得控制异步操作更加容易

（1）Promise基本用法

①实例化Promise对象，构造函数中传递函数，该函数中用于处理异步任务

②resolve和reject两个参数用于处理成功和失败两种情况，并通过p.then获取处理结果

var p=new Promise(function(resolve,reject){
   //实现处理逻辑，根据处理结果分别调用不同的方法     
   //成功时调用 resolve（）
   //失败时调用 reject() 
});
 
p.then(function(ret){
   //从resolve得到正常结果     
}，function（ret){
   //从reject得到错误消息 
})

（2）then参数中的函数返回值

①返回Promise实例对象

返回的该实例对象会调用下一个then。

②返回普通值

返回的普通值会直接传递给下一个then，通过then参数中函数的参数接收该值。

（3）Promise常用的api

①实例方法：

then()得到异步任务的正确结果；catch()获取异常信息；finally()成功与否都会执行（尚不是正式标准）；

②对象方法：

Promise.all()并发处理多个异步任务，所有任务都执行完成才能得到结果；Promise.race()并发处理多个异步任务，只要有一个任务完成就能得到结果；

2、接口调用-fetch用法

①更加简单点的数据获取方式，功能更加强大、更灵活，可以看做是xhr的升级版；

②基于Promise实现

（1）语法结构

fetch(url).then(f1)
             .then(f2)
             ...
             catch(fn)

eg.

fetch('url').then(data=>{
   //text()属于fetch api的一部分，它返回的是promise对象，用于获取后台返回的数据 
   return data.text(); 
}).then(ret=>{
   注意这里获得的才是最终的数据 
   console.log(ret); 
})

（2）fetch请求参数

①常用的配置选择：

method(String):HTTP请求方法，默认为GET（GET、POST、PUT、DELETE）；body(String):HTTP请求参数；headers(Oject):HTTP的请求头，默认为{}

②GET请求方式的参数传递：

传统：

fetch('/abc?id=123',{<br>　　method:'get'<br>}).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) 
})

②DELETE请求方式的参数传递：

fetch('/abc/123',{
   method:'delete'
}).then(data=>{
   return data.text(); 
}).then(ret=>{
   console.log(ret) 
})

③ POST请求方式的参数传递：

一般方式：

fetch('/abc',{
   method:'post',
   body:'uname=list&pwd=123',
   headers:{
       'Content-Type':'application/x-www-form-urlencoded',     
    }   
}).then(data=>{
   return data.text(); 
}).then(ret=>{
   console.log(ret) 
})

json方式：

fetch('/abc',{
   method:'post',
   body:JSON.stringify({
       uname:'lisi',
       age:12 
    }),
   headers:{
       'Content-Type':'application/json',     
    }   
}).then(data=>{
   return data.text(); 
}).then(ret=>{
   console.log(ret) 
})

③ PUT请求方式的参数传递：

也支持一般方式：

fetch('/abc/123',{
   method:'put',
   body:JSON.stringify({
       uname:'lisi',
       age:12 
    }),
   headers:{
       'Content-Type':'application/json',     
    }   
}).then(data=>{
   return data.text(); 
}).then(ret=>{
   console.log(ret) 
})

（2）fetch响应结果

响应数据格式：

①text()：将返回体处理成字符串类型；

②json()：返回结果和JSON.parse(responseText)一样

如：

fetch('/abc/123',{
   method:'get'
}).then(data=>{
   return data.json(); 
}).then(ret=>{
   console.log(ret) 
})

3、接口调用-axios用法

axios是一个基于Promise用于浏览器和node.js的HTTP客户端。

它具有以下特征:

支持浏览器和node.js；支持promise；能拦截请求和响应；自动转换JSON数据；

（1）基本用法

axios.get('/adata)
    .then(ret=>{
       //data属性是固定的，用于获取后台响应的数据
       console.log(ret.data)  
    })

（2）常用API

①get:查询数据；

通过url传递参数：

一般方式：

axios.get('/adata?id=123')
    .then(ret=>{
        console.log(ret.data)
    })    

restful方式：

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('params1','value1');
params.append('params2','value2');
axios.post('/api/test',params).then(ret={
   console.log(ret.data) 
})

③put:修改数据；

和post请求类似。

④delete:删除数据；

和get请求类似。

（3）axios的响应结果

响应结果的主要属性：data:实际响应回来的数据；headers:响应头信息；status:响应状态码；statusText:响应状态信息

（4）axios的全局配置

axios.defaults.timeout=3000;//超时时间
axios.defaults.baseURL='http://127.0.0.1:3000/api/';//默认地址
axios.defaults.headers['mytoken']='qwer1234!@#$'//设置请求头

（5）axios拦截器

①请求拦截器：在请求发出前设置一些信息

//添加一个请求拦截器
axios.interceptors.request.use(function(config){
    //在请求发出之前进行一些信息设置
    return config;
},function(err){
    //处理响应的错误信息               
});

②响应拦截器：在获取数据之前对数据做一些加工处理

//添加一个响应拦截器
axios.interceptors.response.use(function(config){
    //在这里对返回的数据进行处理
    return config;
},function(err){
    //处理响应的错误信息               
});

4、接口调用-async/await用法

async/awati是ES7引入的心语法，可以更加方便的进行异步操作；async关键字用于函数上（async函数的返回值是Promise实例对象）；await关键字用于async函数当中（await可以得到异步的结果）

eg.（可以不使用then）

async function queryData(id){
    const ret=await axios.get('/data');
    return ret;
}
queryData.then(ret=>{
   console.log(ret) 
})

（1）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) 
})