前端调用接口

jquery的ajax

该方法是 jQuery 底层 AJAX 实现。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下无需直接操作该函数，除非需要操作不常用的选项，以获得更多的灵活性。

最简单的情况下，$.ajax() 可以不带任何参数直接使用。

使用方法

使用jquery的ajax需要引入jquery
模板：

$.ajax({
			//调用的接口
            url:' ',
            //请求的类型
            type:' ',
            //传输的数据
            data:{
            },
            //请求成功后运行的函数
            success:(data)=>{
                console.log(data);
            }
        })

案例调用的接口

app.get('/async1', (req, res) => {
  res.send('hello1')
})
app.get('/books', (req, res) => {
  res.send('传统的URL传递参数!' + req.query.id)
})
app.get('/books/:id', (req, res) => {
  res.send('Restful形式的URL传递参数!' + req.params.id)
})
app.post('/books', (req, res) => {
  res.send('POST请求传递参数!' + req.body.uname + '---' + req.body.pwd)
})

get请求

get请求不需要传递数据，可以不写data

//请求get端口
$.ajax({
            url:'http://localhost:3000/async1',
            type:'get',
            success:(data)=>{
                console.log(data);
            }
        })

//静态地址传值

        $.ajax({
            url:'http://localhost:3000/books?id=123',
            type:'get',
            success:(data)=>{
                console.log(data);
            }
        })

// 动态地址传值

           $.ajax({
            url:'http://localhost:3000/books/123',
            type:'get',
            success:(data)=>{
                console.log(data);
            }
        })

post请求

$.ajax({
            url:'http://localhost:3000/books',
            type:'post',
            data:{
            uname:'张三',
            pwd:123
        },
            success:(data)=>{
                console.log(data);
            }
        })

在接口中调用接口

在上面get请求的例子中，我们按顺序调用了接口，但在浏览器的输出中我们可以看到它并没有按照我们写代码的顺序去执行。这是因为ajax是异步执行的。
在项目中我们可能遇到在接口中调用接口的情况，即在调用接口返回成功后继续调用另一个接口，这样的话就需要通过以下方式来实现接口的嵌套调用

$.ajax({
            url:'http://localhost:3000/async1',
            type:'get',
            success:(data)=>{
                console.log(data);
                $.ajax({
                    url:'http://localhost:3000/books?id=123',
                    type:'get',
                    success:(data)=>{
                        console.log(data);
                        $.ajax({
                            url:'http://localhost:3000/books/123',
                            type:'get',
                            success:(data)=>{
                                console.log(data);
                            }
                        })
                    }
                })
            }
        })

这样我们就可以按照写的顺序来调用接口

fetch

Fetch api 是最新的ajax解决方案 Fetch会返回Promise
fetch不是ajax的进一步封装，而是原生js ，没有使用XMLHttpRequest对象

语法格式: fetch(url,options).then()

第一个参数为请求的接口，而第二个接口可选，用于传递数据(如请求方式，要传的值)

案例调用的接口

app.get('/fdata', (req, res) => {
 res.send('Hello Fetch!')
})
app.post('/books', (req, res) => {
 res.send('POST请求传递参数!' + req.body.uname + '---' + req.body.pwd)
})

案例

   fetch('http://localhost:3000/fdata').then(function(data){
           	  // data是调用接口后的响应报文头信息
            console.log(data);
             // text() 方法属于fetch api的一个方法, 它返回一个promise实例对象  用于获取后台返回的数据
            return data.text()
            //后一个then使用前一个then的封装结果
        }).then(function(data){
            // 在这个then中 才可以获取到最终的数据
            console.log(data);
        })

		// 通过URLSearchParams 传递参数
		var params=new URLSearchParams();
        params.append('uname','zhangsan');
        params.append('pwd','123')
        
        fetch('http://localhost:3000/books',{
        //这个里面放传递方式及传递的数据和一些设置(比如请求头)
            method:'post',
            //数据位置要与请求方式对应
            body:params
        }
        ).then(function(data){
            return data.text()
        }).then(function(data){
            console.log(data);
        })

axios

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

使用方法

需要安装或直接script引用

<script>
        axios
        	//调用接口
            .get('http://localhost:3000/axios?id=123')
            //获取服务器返回数据
            .then((data)=>{
                console.log(data);
            })
</script> 

可以看到返回值存放在data中，要调用的话就在返回值的data中找

vue-resource

Vue 要实现异步加载需要使用到 vue-resource 库。因此使用vue-resource调用接口不仅需要引入vue还要引入 vue-resource 库

<script>
        new Vue({
            el:'#app',
            methods: {
                btn(){
                    this.$http.get('http://localhost:3000/books?id=123').then((data=>{
                        console.log(data);
                    }))
                },
                btn1(){
                    this.$http.post('http://localhost:3000/books',{uname:'tom',pwd:456},{emulateJSON:true}).then((data)=>{
                        console.log(data);
                    })
                }
            },
        })
    </script>

可以看到不论是post还是get请求，返回的值都在body中