vue接口调用方式

前端要做动态数据渲染，只能通过调用接口的方式来获取服务端的数据，目前常见的方式有ajax，fetch，axios等常见的方式可以获取接口的数据，我们来分别认识一下这些操作方式..

1.1.1 原生ajax

ajax主要是负责是客户端和服务端异步数据通信的工具，原生的ajax对浏览器支持比较好，所以群众基础还是比较广的，我们先来看一下原生的ajax如何实现对接口数据的请求:

ajax教程参见： AJAX 教程 | 菜鸟教程

原生的ajax请求数据大致分为如下几个步骤:

<script>
        let xhr = null;
        //实例化xmlhttprequest对象
        xhr = new XMLHttpRequest();
        //配置要请求的接口地址
        xhr.open("post","url地址",true);
        //设置请求的头部信息，如果是post请求的话
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
        //设置请求后状态发生变化的回调函数
        xhr.onreadystatechange = ()=>{

        };
        // 发送请求
        xhr.send();
</script>

例如：

自己封装一个ajax对象。发送异步请求：

ajax.js:

function ajax(json){
    //{
    //     url:''

    // }
   
    var json=json||{};
    if(!json.url){
        return false
    }
    json.type=(json.type||'get').toUpperCase()
    // console.log(json.type);

    //发送ajax请求
    //1.首先创建一个ajax对象
    var xhr=new XMLHttpRequest();
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
        // console.log('测试1'+xhr);
    }else{
        xhr = new ActiveXObject('microsoft.XMLHttp');
        // console.log('测试2'+xhr);
    }
    //2.发送请求
    if(json.type=='GET'){
        xhr.open('get',json.url,true)
        xhr.send();
    }else if(json.type=='POST'){


    }
    //3.将从服务器上，请求到的数据显示在页面上
   
    xhr.onreadystatechange=function(){
        //响应已就绪
        // console.log(xhr.readyState);
        if(xhr.readyState==4 && xhr.status==200){
           
            var resObj=JSON.parse(xhr.responseText)
            // console.log(resObj);

            json.success(resObj)


        }
    }
    // console.log(json);
   
    return json
}

index.html中操作：

  <button id="btn">测试</button>

    <script src="./js/ajax.js"></script>
    <script>
     //天气的接口地址
     var apiUrl=`http://wthrcdn.etouch.cn/weather_mini?city=合肥`  
     var btn=document.querySelector('#btn') ;
     btn.onclick=function(){
        // console.log('ok');
        ajax({
            url:apiUrl,
            type:'get',
            dataType:'json',
            success:function(result){
                console.log(result);
            }
        })
     }
    </script>

预览：

1.1.2  jQuery的ajax

但是我们大部分时候可能用上面原生的ajax的时候是很少的，我们一般都是用jQuery封装好的Api，这个前提是我们需要先引入jQuery文件，否则提示报错，jQuery的ajax使用步骤大致如下所示

<script>
        $.ajax({
            url:"",
            data:{

            },
            type: "post",
            dataType: "json",
            async: true,
            success(res){

            },
            error(){

            }
        })
</script>

1.1.3 fetch

• Fetch API是新的ajax解决方案 Fetch会返回Promise

• fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象

• 基本结构大致如下 fetch(url, options).then()

fetch API教程参见：

Fetch API官方文档_w3cschool

Fetch API 教程 - 阮一峰的网络日志

例如：

<div>
        获取的接口数据是：
        <h1 id="tit"></h1>
    </div>

<script>
        //nodejs接口地址 http://localhost:4000/adata
        var apiUrl='http://localhost:4000/adata';
        fetch(apiUrl).then(function(data){
            // console.log(data.text());
            //它返回一个Promise实例对象，用于获取后台返回的数据
            return data.text()
        }).then(function(data){
            document.querySelector('#tit').innerHTML=data
            console.log(data);
        })
    </script>

app.js

app.get('/adata',(req,res)=>{
    res.send('小余同学');

})

预览：

fetch支持很多请求的方式如POST，GET，DELETE，UPDATE，PATCH和PUT

• 默认的是 GET 请求

• 需要在 options 对象中 指定对应的 method   method:请求使用的方法

• post 和 普通 请求的时候 需要在options 中 设置  请求头 headers   和  body

<script>
        var apiUrl=`http://localhost:4000/apilogin`
        fetch(apiUrl+'?id=123', {
            // get 请求可以省略不写 默认的是GET 
            method: 'get'
            })
            .then(function(data) {
            return data.text();
            }).then(function(data) {
            //转化为JSON对象
            dObj=JSON.parse(data)
            console.log(dObj);
            console.log(dObj.data.id)
            });
    </script>

login.json

{
    "code":0,
    "message":"登录成功",
    "data":{
        "token":"vip",
        "id":"123123",
        "user":"admin",
        "passward":"123456"
    }
}

预览：

 

4.3.4 axios

• 基于promise用于浏览器和node.js的http客户端

• 支持浏览器和node.js

• 支持promise

• 能拦截请求和响应

• 自动转换JSON数据

• 能转换请求和响应数据

axios基础用法

• get和 delete请求传递参数

  • 通过传统的url  以 ? 的形式传递参数

  • restful 形式传递参数

  • 通过params  形式传递参数

• post  和 put  请求传递参数

  • 通过选项传递参数

  • 通过 URLSearchParams  传递参数

axios官网地址：axios中文网|axios API 中文文档 | axios

 

 <script src="./js/vue.js"></script>
    <script src="./js/axios.js"></script>
    <script>
        // 1.发送get请求
        var apiUrl=`http://localhost:4000/adata`;
        axios.get(apiUrl).then(function(data){
            console.log(data);
        })

预览：

 

app.js

app.get('/acdata/:id',(req,res)=>{
    console.log(req.params);
    res.send('小余同学');

})

//2.请求传递参数
        var id=123123
        var apiUrl=`http://localhost:4000/acdata/${id}`;
        axios.get(apiUrl).then(function(data){
            console.log(data);
        })

在app.js文件夹下运行npm run serve

预览：

html页面预览：

 

postman中预览：

 

post传递参数：

       var apiUrl=`http://localhost:4000/pdata`;
        axios.post(apiUrl,{
           uname:'xy',
           pwd:123
        }).then(function(data){
           
            console.log(data);
           
        })

app.js

var bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

app.post('/pdata',(req,res)=>{
    console.log(req.body);
    res.send('hx')
})

预览：

 

postman预览：