Vue中前端与后端如何交互?

Vue 专栏收录该内容
1 篇文章 0 订阅

Promise的基本使用

基本使用

new一个promise,为其传入一个函数作为参数,这个函数中传入两个参数,分别用来执行异步任务成功和失败的回调函数。

function query(){
	var p=new Promise(function(resolve,reject){
		setTimeout(function(){
		var flag=true;
		if(flag){
			resolve('对了');
		}
		else{
			reject('错了');
		}
		},1000)
	});
	return p;
}
query().then(function(data){   //第一个函数接收成功的值
	console.log(data);
},function(data){             //第二个函数接收失败的值
	console.log(data);
});
输出结果:‘对了’

多个请求,链式编程

当我们发送多个请求时,传统的ajax会出现多层嵌套的回调地狱,Promise为我们提供了链式编程。

function queryData(url) {
      var p = new Promise(function(resolve, reject){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
          if(xhr.readyState != 4) return;
          if(xhr.readyState == 4 && xhr.status == 200) {
            // 处理正常的情况
            resolve(xhr.responseText);
          }else{
            // 处理异常情况
            reject('服务器错误');
          }
        };
        xhr.open('get', url);
        xhr.send(null);
      });
      return p;
    }
    // 发送多个ajax请求并且保证执行顺序
    queryData('http://localhost:3000/data')
      .then(function(data){
        console.log(data)
       //想要链式编程下去,必须return
        return queryData('http://localhost:3000/data1');
      })
      .then(function(data){
        console.log(data);
        return queryData('http://localhost:3000/data2');
      })
      .then(function(data){
        console.log(data)
      });

Promise的API—实例方法

.then() : 传入两个参数时,只执行成功的。传入一个参数时,那个参数执行的是成功的回调。
得到成功的结果
.catch():传入两个参数时,只执行错误的。传入一个参数时,那个参数执行的是失败的回调。
得到异常的结果
.finally()不是正式标准
无论成功与否都会执行

<script type="text/javascript">
    /*
      Promise常用API-实例方法
    */
    // console.dir(Promise);
    function foo() {
      return new Promise(function(resolve, reject){
        setTimeout(function(){
          // resolve(123);
          reject('error');
        }, 100);
      })
    }
    foo()
       .then(function(data){
         console.log(data)
       })
       .catch(function(data){
        console.log(data)
       })
       .finally(function(){
         console.log('finished')
       });

    // --------------------------
    // 两种写法是等效的
    foo()
      .then(function(data){
        # 得到异步任务正确的结果
        console.log(data)
      },function(data){
        # 获取异常信息
        console.log(data)
      })
      # 成功与否都会执行(不是正式标准) 
      .finally(function(){
        console.log('finished')
      });
  </script>

Promise的API—对象方法(直接通过Promise函数名称调用的方法)

(1)Promise.all()并发处理多个异步任务,所有任务都执行完成才能得到结果。

  • Promise.all方法接受一个数组作参数,数组中的对象(p1、p2、p3)均为promise实例(如果不是一个promise,该项会被用Promise.resolve转换为一个promise)。它的状态由这三个promise实例决定
    (2)Promise.race()并发处理多个异步任务,只要有一个任务完成就能得到结果。
  • Promise.race方法同样接受一个数组作参数。当p1, p2, p3中有一个实例的状态发生改变(变为fulfilledrejected),p的状态就跟着改变。并把第一个改变状态的promise的返回值,传给p的回调函数
  <script type="text/javascript">
    /*
      Promise常用API-对象方法
    */
    // console.dir(Promise)
    function queryData(url) {
      return new Promise(function(resolve, reject){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
          if(xhr.readyState != 4) return;
          if(xhr.readyState == 4 && xhr.status == 200) {
            // 处理正常的情况
            resolve(xhr.responseText);
          }else{
            // 处理异常情况
            reject('服务器错误');
          }
        };
        xhr.open('get', url);
        xhr.send(null);
      });
    }

    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(function(result){
       //请求时间和发送顺序有关,先发送先返回。
       //   all 中的参数  [p1,p2,p3]   和 返回的结果一 一对应["HELLO TOM", "HELLO JERRY", "HELLO SPIKE"]
       console.log(result) //["HELLO TOM", "HELLO JERRY", "HELLO SPIKE"]
     })
    Promise.race([p1,p2,p3]).then(function(result){
      // 由于p1执行较快,Promise的then()将获得结果'P1'。p2,p3仍在继续执行,但执行结果将被丢弃。
      console.log(result) // "HELLO TOM"
    })
  </script>

接口调用-fetch用法

基本使用

  • 更加简单的数据获取方式,高性能更强大、更灵活,可以看做是xhr的升级版
  • 给Promise实现
  • Fetch API是新的ajax解决方案 Fetch会返回Promise
  • fetch不是ajax的进一步封装,而是原生js,没有使用XMLHttpRequest对象
  • fetch(url, options).then()
 <script type="text/javascript">
   /*
     Fetch API 基本用法
     	fetch(url).then()
    	第一个参数请求的路径   Fetch会返回Promise   所以我们可以使用then 拿到请求成功的结果 
   */
   fetch('http://localhost:3000/fdata').then(function(data){
     // text()方法属于fetchAPI的一部分,它返回一个Promise实例对象,用于获取后台返回的数据
     return data.text();   //text()是fetch的一个api,返回的是一个Promise的对象
   }).then(function(data){
     //   在这个then里面我们能拿到最终的数据  
     console.log(data);
   })
 </script>

常用配置选项

  • fetch(url, options).then()
  • HTTP协议,它给我们提供了很多的方法,如POST,GET,DELETE,UPDATE,PATCH和PUT
  • 默认的是 GET 请求
  • 需要在 options 对象中 指定对应的 method method:请求使用的方法
  • post 和 普通 请求的时候 需要在options 中 设置 请求头 headers 和 body

GET请求

传统url请求传参—通过“?”传递参数

前端代码

fetch('http://localhost:3000/books?id=123', {
            	# get 请求可以省略不写 默认的是GET 
                method: 'get'
            })
            .then(function(data) {
            	# 它返回一个Promise实例对象,用于获取后台返回的数据
                return data.text();
            }).then(function(data) {
            	# 在这个then里面我们能拿到最终的数据  
                console.log(data)
            });

后端代码

app.get('/books'(req.res)=>{
	res.send("传统url传递参数"+req.query.id);
})

restful形式url传递参数—通过“/”传递参数

前端代码

fetch('http://localhost:3000/books/456', {
            	# get 请求可以省略不写 默认的是GET 
                method: 'get'
            })
            .then(function(data) {
                return data.text();
            }).then(function(data) {
                console.log(data)
            });

后端代码

app.get('/book/:id',(req.res)=>{
	res.send("restful形式传递参数"+req.params.id);
})

DELETE请求

与GET方式相似,只需把method属性改为“delete”

POST请求方式的参数传递

post传递参数时,option对象中除了method属性,需要额外增加headersbody属性
前端代码

body为查询字符串格式

var url='http://127.0.0.1:3000/product/books/';
      fetch(url,{
        method:'post',
        headers:{
          'Content-Type':'application/x-www-form-urlencoded'
        },
        body:'uname=高进宇&pwd=11223344'
      }).then(data=>{
        return data.text();
      }).then(data=>{
        console.log(data);
      })

后端代码

app.post('/books', (req, res) => {
    res.send('axios post 传递参数' + req.body.uname + '---' + req.body.pwd)
  })

body为JSON格式

fetch('http://localhost:3000/books', {
                method: 'post',
                body: JSON.stringify({
                    uname: '张三',
                    pwd: '456'
                }),
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(function(data) {
                return data.text();
            }).then(function(data) {
                console.log(data)
            });

后端代码

app.post('/books', (req, res) => {
    res.send('axios post 传递参数' + req.body.uname + '---' + req.body.pwd)
  })

PUT请求方式的参数传递

fetch响应结果

  • 用fetch来获取数据,如果响应正常返回,我们首先看到的是一个response对象,其中包括返回的一堆原始字节,这些字节需要在收到后,需要我们通过调用方法将其转换为相应格式的数据,比如JSONBLOB或者TEXT等等
  • text():将返回体处理成字符串形式
  • json():返回结果和JSON.parse(response.Text)一样
    /*
      Fetch响应结果的数据格式
    */
    fetch('http://localhost:3000/json').then(function(data){
      // return data.json();   //  将获取到的数据使用 json 转换对象
      return data.text(); //  //  将获取到的数据 转换成字符串 
    }).then(function(data){
      // console.log(data.uname)
      // console.log(typeof data)
      var obj = JSON.parse(data);
      console.log(obj.uname,obj.age,obj.gender)
    })

接口调用–axios用法

认识

  • 基于promise用于浏览器和node.js的http客户端
  • 支持浏览器和node.js
  • 支持promise
  • 能拦截请求和响应
  • 自动转换JSON数据
  • 能转换请求和响应数据

axios的基础用法

axios的常用API

  • get()
  • post()
  • delete()
  • put()

axios 全局配置

  • 配置公共的请求头
    axios.defaults.baseURL = 'https://api.example.com';
  • 配置 超时时间
    axios.defaults.timeout = 2500;
  • 配置公共的请求头
    axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
  • 配置公共的 post 的 Content-Type
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

GET请求

发送get请求

axios.get('http://localhost:3000/adata').then(function(ret){ 
      #  拿到 ret 是一个对象      所有的对象都存在 ret 的data 属性里面
      // 注意data属性是固定的用法,用于获取后台的实际数据
      console.log(ret.data)
      console.log(ret)
    })

get 请求传递参数

通过传统的url 以 ? 的形式传递参数
axios.get('http://localhost:3000/axios?id=123').then(function(ret){
      console.log(ret.data)
    })
restful 形式传递参数
axios.get('http://localhost:3000/axios/123').then(function(ret){
      console.log(ret.data)
    })
通过params 形式传递参数

前端代码

axios.get('http://localhost:3000/axios', {
      params: {
        id: 789
      }
    }).then(function(ret){
      console.log(ret.data)
    })

后端代码

router.get('/axios', (req, res) => {
    res.send('axios get 传递参数' + req.query.id)
})

DELETE请求传参

传参形式和GET请求一样

POST请求

通过选项传递参数(默认传递的是json格式的数据

前端代码

axios.post('http://localhost:3000/axios', {
      uname: 'lisi',
      pwd: 123
    }).then(function(ret){
      console.log(ret.data)
    })

后端代码

router.post('/axios', (req, res) => {
    res.send('axios post 传递参数' + req.body.uname + '---' + req.body.pwd)
  })

通过 URLSearchParams传递参数(application/x-www-form-urlencoded

var params = new URLSearchParams();
    params.append('uname', 'zhangsan');
    params.append('pwd', '111');
    axios.post('http://localhost:3000/axios', params).then(function(ret){
      console.log(ret.data)
    })

PUT请求

与post请求一样。

axios的响应结果

  • data:实际响应回来的数据。
  • headers:响应头信息。
  • status:响应状态码。
  • statusText:响应状态信息。

axios拦截器

请求拦截器

  • 请求拦截器的作用是在请求发送前进行一些操作
    • 例如在每个请求体里加上token,统一做了处理如果以后要改也非常容易
axios.interceptors.request.use(function(config) {
      console.log(config.url)
      # 1.1  任何请求都会经过这一步   在发送请求之前做些什么   
      config.headers.mytoken = 'nihao';
      # 1.2  这里一定要return   否则配置不成功  
      return config;
    }, function(err){
       #1.3 对请求错误做点什么    
      console.log(err)
    })

响应拦截器

  • 响应拦截器的作用是在接收到响应后进行一些操作
    • 例如在服务器返回登录状态失效,需要重新登录的时候,跳转到登录页
 axios.interceptors.response.use(function(res) {
      #2.1  在接收响应做些什么  
      var data = res.data;
      return data;
    }, function(err){
      #2.2 对响应错误做点什么  
      console.log(err)
    })

经过以上响应拦截器处理以后。下面拿到的res就是需要的数据,不需要再进行res.data的操作。

axios.post('http://localhost:3000/axios', {
      uname: 'lisi',
      pwd: 123
    }).then(function(res){
      console.log(res)
    })

async 和 await

  • async作为一个关键字放到函数前面
    • 任何一个async函数都会隐式返回一个promise
  • await关键字只能在使用async定义的函数中使用
    • ​ await后面可以直接跟一个 Promise实例对象
    • ​ await函数不能单独使用
  • async/await 让异步代码看起来、表现起来更像同步代码
  • async/await是ES7引入的新语法,可以更加方便的进行异步操作。
  • async关键字用于函数上(async函数的返回值是Promise对象)。
  • await关键字用于async函数当中(await可以直接得到异步的结果)。

async 基础用法

    //async作为一个关键字放到函数前面
	async function queryData() {
      //await关键字只能在使用async定义的函数中使用      await后面可以直接跟一个 Promise实例对象
      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() {
      //  添加await之后 当前的await 返回结果之后才会执行后面的代码   
      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)
    })
©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页

打赏作者

混子前端

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值