Vue前后端交互

Promise 基本用法

实例化 Promise对象，构造函数中出传递函数，该函数用于处理异步任务

resolve和reject两个参数用于处理成功和失败两种情况，并通过p.then获取处理结果

处理原生Ajax 

封装函数 里面继续判断 返回值，外面调用再then

发送多次ajax请求

.then参数中的函数返回值  

1.返回promise实例对象   //返回该实例对象会调下一个then

2.返回普通值  //返回的普通值会直接传递给下一个then,通过then参数中的函数接收该值  默认会产生一个新的promise对象，方便下一个then调用

Promise常用的API

实例方法

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

p.catch() 获取异常信息

p.finally() 成功是否都会执行(尚且不是正式标准)

对象方法

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

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

接口调用-fetch基本用法

text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据

第二个then才返回数据

fetch请求参数

GET请求方式

methods 请求方式默认为GET（GET,POST,PUT,DELETE）  

请求地址后跟对象类型，指定请求方式

后台：

传统的？形式的url传递参数 通过req.qurery.参数名获取参数

Restful形式的url传递参数   通过req.params.参数名获取参数

DELETE请求方式

POST请求方式

body(String)指定HTTP的请求参数  

headers(String)指定HTTP的请求头，默认为{}    //必须填写 否则body参数传递不过去

'Content-Type': 'application/x-www-form-urlencoded'    //传递的参数   值通过=赋值，值之间通过&相连

'Content-Type': 'application/json'   //传递的参数 使用 JSON.stringify({  参数1(键值对)，参数 2}) 的形式

支持json形式 要通过  app.use(bodyParser.json());

后台：通过req.body.参数名获取参数

PUT请求方式

同POST方式

fetch响应结果

后台：

text() 方式  通过res.send返回结果

json()方式  通过res.json({结果})

接口调用-axios基本用法

常用API

get请求

通过？传参

通过/参数 方式 传参

通过 params对象 形式传参

后台：

传统的？形式的url传递参数 通过req.qurery.参数名获取参数

Restful形式和params对象 的url传递参数   通过req.params.参数名获取参数

post请求

  //提交的格式是json格式

  //传递表单格式

后台：通过req.body.参数名获取参数  

put请求  同post请求

delete请求  同get请求

后台：params对象 的url传递参数   通过req.query.参数名获取参数

axios响应结果

axios全局配置

axios拦截器

1.请求拦截器

axios.interceptors.request.use(function(config) {}, function(err){)}) 

第一个函数在请求发送之前做一些信息设置  第二个函数为错误处理

2.响应拦截器

axios.interceptors.response.use(function(res) {}, function(err)})

第一个函数在这里对返回的数据进行处理  第二个函数为错误处理

接口调用 async/await用法

await后面跟promise实例对象 处理异步任务

async值的返回结果为新的promise实例对象 所以后面可以直接then获取结果

处理多个异步任务

顺序处理任务即可