前后端交互

前后端交互，即前端和后端的互动，前端需要获取（get）的数据，获取上传（post）的数据，前端发送请求，后端接收到请求后，便进行对数据库的操作，返回前端所需数据，完成一次前后端交互

1.前后端交互模式

（1）调用接口方式

• 原生ajax
• 基于jquery的ajax
• fetch
• axios

（2）url地址格式

• 传统url形式

              schema://host:port/path?query#fragment

• Restful形式url

2.Promise用法

（1）异步调用

• 定时任务
• ajax
• 事件函数
• 多次异步调用的结果顺序不确定
• 异步调用结果存在依赖需要嵌套

（2）promise

异步编程的一种解决方法

好处：

• 可以避免多层异步调用嵌套问题（回调地狱）
• promise对象提供了简洁的API，使得控制异步操作更容易

（3）基本用法

var p = new promise (function(resolve, reject){

           //成功时调用 resolve()

          //失败时调用reject()

});

p.then(function(ret){

         //从resolve中得到正常结果

}, function(ret) {

       //从reject中得到错误信息

});

（4）基于promise处理ajax请求

• 处理原生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 (shr.responseText)

                 } else {

                       reject('出错了');

                }

     }

     xhr.open('get', '/data');

     xhr.send(null);

})

}

• 发送多次ajax请求

queryData()

.then(function(data){

return queryData();

})

.then(function(data){

return queryData();

})

.then(function(data){

return queryData();

});

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

• 返回promise实例对象

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

• 返回普通值

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

（6）promise常用的API

• 实例方法

           p.then()得到异步任务的正确结果

           p.catch()获取异常信息

           p.finally()成功与否都会执行

queryData()

.then(function(data){

      console.log(data);

})

.catch(function(data){

      console.log(data);

})

.finally(function(data){

     console.log(data);

});

• 对象方法

            promise.all()并发处理多个异步任务，所有任务都执行完成才得到结果

            promise.race()并发处理多个异步任务，只要有一个任务完成技能得到结果

promise.all([p1, p2, p3]).then(result => {

        console.log(result)

})

promise.race([p1, p2, p3]).then(result => {

        console.log(result)

})

3.接口调用-fetch用法

fetch的返回格式采用的是promise分格，因此可以fetch（‘‘地址’’）.then()之后可以一直then()，.then方法返回的也是promise

fetch的错误抛出：fetch不会对400等错误抛出promise分格的异常，除非断网，因此需要手动判断我们的请求结果是否正常，出现异常时，手动throw new error('错误')就会被promise的reject捕捉抛出异常

（1）fetch概述

语法：fetch(url).then(fn2)

                         .then(fn3)

                         ...

                         .catch(fn)

（2）基本用法

fetch('/abc').then(data => {

         return data.text();

}).then(ret => {

         console.log(ret);     //得到最终数据

});

（3）fetch请求参数

• 常用配置项

fetch('/abc', {

      method: 'get'            //http请求方式，默认为get

}).then(data => {

     return data.text();

}).then(ret => {

     console.log(ret);

});

• GET请求方式的参数传递

fetch('/abc?id=123')...

fetch('/abc/123', {method: 'get' ......

• DELETE请求方式传参

fetch('/abc/123', method: 'delete' ......

• POST请求方式传参

fetch('/book', {

       mothod: 'post',

       body: 'uname = off&age = 31',

       header: {

              'content-Type' : 'application/x-www-form-uelencoded',

       }

}).then()......

• PUT请求方式传参

fetch('/book/123', {

       mothed: 'put',

       body:JSON.stringify({

            uname:'off',

            age:31

      })

      header: {

                 'content-Type':'application/json',

     }

}).then()......

（4）响应结果

响应数据格式

text():将返回体处理成字符串类型

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

4.接口调用-axios用法

（1）基本特征

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

（2）基本用法

axios.get('/adata')

        .then(ret => {

                 console.log(ret.data)       //data属性名称是固定的，用于获取后台响应的数据

       })

（3）axios常用API         axios把各种请求方式都封装成了不用的API，使用起来更方便

• get       查
• post     添
• put       改
• delete  删

（4）参数传递

• GET

axios.get('/adata ? id = 123')    //通过url传参

        .then(ret => {

                 console.log(ret.data)

       })

axios.get('/adata/123')

        .then(ret => {

                 console.log(ret.data)

       })

axios.get('/adata', {

             params: {            //通过params传参

                 id: 123            params方式就是在url地址后面多了个参数对象，params属性写在这个参数里面，params里面的内容就是传递的参数，多个参数直接在params里面写

            }

})

.then(ret => {

         console.log(ret.data)

})

• post传参

axios.post('/adata' {

       uname: 'tom',

       pwd: 123

}).then(ret => {

        console.log(ret.data)

})

const params = new UELSearchParams();      //通过URLSearchParams传参（application/x-www-form-urlencoded）

params.append('params1', 'value1');

params.append('params2', 'value2');

axios.post('/api/test', params).then(ret => {

           console.log(ret.data)

})

• PUT传参

axios.put('/adata/123', {

       uname: 'tom',

       pwd: 123

}).then(ret => {

        console.log(ret.data)

})

（5）响应结果

主要属性

data：实际响应回的数据

headers：响应头信息

status：响应状态码

statusText：响应状态信息

axios.post('/axios-json').then(ret => {

         console.log(ret)

})

（6）axios全局配置

axios.defaults.timeout = 3000;   //超出时间

axios.defaults.baseURL = 'http://localhost:3000/app';    //默认地址

axios.defaults.header['mytoken'] = 'aqwerwqwerqwerzewrwe23eresdf23'     //设置请求头

（7）拦截器

• 请求拦截器

axios.interceptors.request.use(function(config){   //添加一个请求拦截器

                  return config;            //在请求发出前进行一些信息设置

}, function(err) {

               //处理响应的错误信息

})；

• 响应拦截器

axios.interceptors.response.use(function (res){

          return res;       //对返回数据进行处理

}, function(err) {

          //处理响应的错误信息

})

5.接口调用-async/await用法

（1）基本用法

async function queryData(id) {

    const ret = await axios.get('/data');

    return ret;

}

queryData.then(ret => {

      console.log(ret)

})

（2）处理多个异步请求

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)

})