欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue前端交互

程序员文章站 2023-12-22 13:50:04
...

1、接口调用方式

  • 原生ajax
  • 基于jQuery的ajax
  • fetch
  • axios
    Vue前端交互

2、URL地址格式
Restful形式的URL

  • HTTP 请求方式
  • GET 查询
  • POST 添加
  • PUT 修改
  • DELETE 删除

3、Promise 概述

  • Promise 是异步编程的一种解决方案,从语法上讲,Promise 是一个对象,从它可以获取异步操作的消息
  • 使用Promise 的好处
    1.可以避免多层异步调用嵌套问题(回调地狱)
    2.Promise 对象提供了简介API,使得控制异步操作更加容易

4、Promise 的基本用法
实例化Promise 对象,构造函数中传递函数,该函数中用于处理异步任务
resolve和reject两个参数用于处理成功和失败两种情况,并通过p.then获取处理结果

var p=new Promise (function(resolve,reject){
    //成功时调用 resolve()
    //失败时调用reject ()
});
p.then(function(ret){
    //从resolve得到正常结果
},function(ret){
//从reject得到错误信息    
});

5、基于Promise 处理Ajax请求
   1.处理原生Ajax

function queryData(){
    return new Promise (function(resolve,reject){
        var xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function(){
            if(xhr.readyState!=4) return;
            if(xhr.status=200){
                resolve(xhr.responseText)
            }else{
                reject('出错了');
            }
        }
        xhr.open('get','/data');
        xhr.send(null);
    })
}

   2.发送多次ajax请求

queryData()
 .then(function(data){
     return queryData();
 })
 .then(function(data){
     return queryData();
 })
 .then(function(data){
     return queryData();
 });

6、then参数中的函数返回值
   1.返回Promise 实例对象

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

   2.返回普通值

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

7、Promise 常用的API
   1.实例方法

  •  p.then()得到异步任务的正确结果
  •  p.catch()获取异常信息
  •  p.finally()成功与否都会执行(尚且不是正式标准)
queryData()
    .then(function(data){
        console.log(data);
    })
    .catch(function(data){
        console.log(data);
    })
    .finally(function(){
        console.log('finished');
    });    

   2.对象方法

  •  Promise.all()并发处理多个异步任务,所有任务都执行完成才能得到结果
  •  Promise.race()并发处理多个异步任务,只要有一个任务完成就能得到结果
Promise.all([p1,p2,p3]).then((resule)=>{
    console.log(result)
})

Promise .race([p1,p2,p3]).then((result)=>{
    console.log(resule)
})

8、接口调用-fatch用法

fetch概述
   1.基本特性

  •  更加简单的数据获取方式,功能更加强大,更灵活,可以看做是xhr的升级版
  •  基于Promise实现

   2.语法结构

fetch(url).then(fn2)
          .then(fn3)
          ...
          .catch(fn)

   3.fetch的基本用法

fetch('/abc').then(data=>
    return data.text();
}).then(ret=>{
    //注意这里得到的才是最终的数据
    console.log(ret);
    });

   4.fetch请求参数

    1.GET请求方式的参数传递

fetch('/abc?id=123').then(data=>{
    return data.text();
}).then(ret=>)
    //注意这里得到的才是最终的数据
    console.log(ret);
});    
fetch('/abc/123',{
    method:'get'
}).then(data=>{
    return data.text();
}).then(ret=>){
    //这里得到的是最终数据
    console.log(ret);
});

    2.DELETE请求方式的参数传递

fetch('/abc/123',{
    method:'delete'
}).then(data=>{
    return data.text();
}).then(ret=>{
    //这里得到的是最终数据
    console.log(ret);
});

    3.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);
});

    4.PUT请求方式的参数传递

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

    5.fetch相应结果
   响应数据格式

  •  text():将返回体处理成字符串类型
  •  json():返回结果和JSON.parse(responseText)一样
fetch('/abc'then(data=>{
    //return data.text();
    return data.json();
}).then(ret=>{
    console.log(ret);
});

9、axios的基本特性
   1.axios是一个基于Promise用于浏览器和node.js的HTTP客户端

  •  特征
    支持浏览器和node.js
    支持Promise
    能拦截请求和相应
    自动转换JSON数据
  •  基本用法
axios.get('/adata')
    .then(ret=>{
        //data属性名称是固定的,用于获取后台响应数据
        console.log(ret.data)
    })
  •  axios常用的API
    get:查询数据
    post:添加数据
    put:修改数据
    delete:删除数据

  2.axios的参数传递

    1.GET传递参数

  •  通过URL传递参数
  •  通过params选项传递参数
axios.get('/adata?id=123')
    .then(ret=>{
        console.log(ret.data)
    })


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


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

    2.POST传递参数

  •  通过选项传递参数(默认传递的是json格式的数据)
axios.post('/adata',{
    uname:'tom',
    pwd:123
}).then(ret=>{
    console.log(ret.data)
})

    3.PUT传递参数

  •  参数传递与POST类似
axios.put('/adata/123',{
    uname:'tom',
    pwd:123
}).then(ret=>{
    console.log(ret.data)
})

   3.接口调用-axios用法

  •  axios的全局配置
  •  axios.defaults.timeout=3000;//超越时间
  •  axios.defaults.baseURL=‘http://localhost:3000/app’//默认地址
  •  axios.defaults.headers[‘mytoken’]=‘aqwerwqwerqwer2ewrwe23eresdf23’//设置请求头

   4.axios拦截器
    1.请求拦截信息
    在请求发出之前设置一些信息
Vue前端交互

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

10、接口调用-async/await用法
基本用法

  •  async/await是ES7引入的新语法,可以更加方便的进行异步操作
  •  async关键字用于函数上(async函数的返回值是Promise实例对象)
  •  awiat关键字用于async函数当中(await可以得到异步的结果)
async function queryData(id){
    const ret=await axios.get('/data');
    return ret;
}
queryData.then(ret=>{
    console.log(ret)
})
相关标签: 【BS学习】

上一篇:

下一篇: