vue前后端交互

1.前后端交互模式

（1）接口调用方式

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

在vue中常用的是fetch和axios,通过url传输数据

（2）URL地址格式

        Restful形式的url

http请求方式：GET（查询）、  POST（添加）、  PUT（修改）、  DELETE（删除）

2.Promise用法

为解决嵌套回调函数编码方式带来的问题，所以在es6中新增了一个API：promise(承诺的，保证)

（1）使用：

• 实例化promise对象，构造函数中传递函数，该函数中用于处理异步任务。
• resolve和reject两个参数用于处理成功和失败两种情况，并通过p.then获取处理结果。

e.g：
//promise是一个构造函数
var fs = require('fs')
// 1.创建promise容器
//promise容器一旦创建，就会执行里面的代码
var one = new Promise(function (resolve,reject) {
    fs.readFile('./data/a.txt','utf8',function (err,data) {
        if(err){
            //承诺容器中的任务失败了
            //把容器的pending状态变为rejected
            // throw err
            reject(err)
        }
        //承诺容器中的任务成功了
        //把容器pending状态变为resolved
        // console.log(data)
        resolve(data)
    })
})

var two = new Promise(function (resolve,reject) {
    fs.readFile('./data/b.txt','utf8',function (err,data) {
        if(err){
            reject(err)
        }
        resolve(data)
    })
})

var three = new Promise(function (resolve,reject) {
    fs.readFile('./data/c.txt','utf8',function (err,data) {
        if(err){
            reject(err)
        }
        resolve(data)
    })
})

one.then(function (data) {
    console.log(data)
    return two
},function (err) {
    console.log('文件读取失败！',err)
}).then(function (data) {
    console.log(data)
    return three
}).then(function (data) {
    console.log(data)
})

（2）基于ajax的promise

function get(url) {
    return new Promise(function (resolve,reject) {
        var oReq = new XMLHttpRequest()
        oReq.onload = function () {
            //异步用回调函数返回操作结果
            resolve(oReq.responseText)
        }
        oReq.onerror = function(err){
            reject(err)
        }
        oReq.open('get',url,true)
        oReq.send()
    })
}

（3）promise中常用的API

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

p.catch()  获取异常信息

p.finally()  成功与否都会执行 （但不是正确标准）

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

Promise.race()  并发处理多个异步任务，只要一个任务执行完成就能得到结果

3.接口调用fetch用法

fetch相比于传统的ajax更灵活，功能更强大，基于promise实现

语法结构：

fetch(url).then(f1)

              .then(f2)

              ...

              .catch(fn)

fetch的基本用法：

fetch（'http://localhost:3000/abc'）.then(function(data){

 return data.text()

}).then(function(data){

  console.log(data)

})

text()方法属于fetchAPI的一部分，它返回一个promise实例对象，用于获取后台返回的数据，还有一个方法，json()是以对象形式获取返回的数据。

fecth请求参数：

get请求方式的参数传递：

post请求的参数传递：

传递JSON格式数据：

put请求方式的参数传递：

4.接口调用aixos用法

aixos是一个基于promise用于浏览器和node.js的HTTP客户端，能拦截和请求响应，自动转换JSON数据

去网站下载axios.js，引用进js文件就可以使用

https://github.com/axios/axios

基本用法：与fetch类似

get请求传参：

post请求传参：

json形式传递：

表单形式传递：

put请求传递参数：

axios全局配置：

anxios拦截器：

请求拦截器：在发送请求之前设置一些信息，通过拦截器可以控制所有请求

可以在拦截器中设置请求头

响应拦截器：

在获取数据之前，对数据进行一些加工处理

5.接口调用async/await用法

提高编程体验，更方便简洁，让异步看起来像是同步

多个异步请求的场景;