Vue基础 前后端交互

Promise

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

<script type="text/javascript"> var p = new Promise(function(resolve,reject){ setTimeout(function(){ var flag = false; if(flag){ resolve("hello") }else { reject("error") } },1000) }) p.then(function(resolve){ console.log(resolve); }).catch(function(reject){ console.log(reject); }) </script>

基于promise处理ajax请求

<script type="text/javascript"> function proa(url){ return new Promise(function(resolve,reject){ var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState!=4){ return false; } if(xhr.readyState ==4 && xhr.status==200){ resolve(xhr.responseText); }else{ reject("出错了") } }; xhr.open("get",url); xhr.send(null) }) } proa("http://localhost:3000/test") .then(function(resolve){ console.log(resolve); return proa("http://localhost:3000/test1") }).then(function(resolve){ console.log(resolve); }).catch(function(reject){ console.log(reject); }) </script>

promise实例方法

.then（）:返回成功结果resolve .catch（）：返回失败结果reject .finally（）：成功与否都会执行

promise对象方法

promise.all（）：并发处理多个异步任务，所有任务完成后才能得到结果 promise.race（）：并发处理多个异步任务，一个任务完成就能得到结果

接口调用fetch用法

更简单的数据获取方式

<script type="text/javascript"> fetch("http://localhost:3000/test").then(data => { return data.text() }).then(ret => { console.log(ret); }) </script>

fetch配置

1、method：GET,POST,PUT,DELETE 请求方式 2、body（String）请求参数 3、headers（Object）请求头，默认为{} ~get的请求方式： 传统：

fetch("http://localhost:3000/books?id=123",{ method:"get" }).then(data => { return data.text() }).then(ret => { console.log(ret); }); app.get("/books",(req,res) => { res.send("传统方式的请求"+req.query.id) })

Restful：

fetch("http://localhost:3000/book/456",{ method:"get" }).then(data => { return data.text() }).then(ret => { console.log(ret); }); app.get("/book/:id",(req,res) => { res.send("Restful方式的请求"+req.params.id) })

~delete请求：

fetch("http://localhost:3000/book/789",{ method:"delete" }).then(data => { return data.text() }).then(ret => { console.log(ret); }) app.delete("/book/:id",(req,res) => { res.send("delete方式的请求"+req.params.id) })

~post 请求： 字符串方式：

fetch("http://localhost:3000/book",{ method:"post", body:"username=lisi&age=20", headers:{ "Content-Type":"application/x-www-form-urlencoded" } }).then(data => { return data.text() }).then(ret => { console.log(ret); }) app.post("/book",(req,res) => { res.send("post字符串方式的请求"+req.body.username+'---'+req.body.age) })

json方式：

fetch("http://localhost:3000/books",{ method:"post", body:JSON.stringify({ username:"zhangsan", age:80 }), headers:{ "Content-Type":"application/json" } }).then(data => { return data.text() }).then(ret => { console.log(ret); }) app.post("/books",(req,res) => { res.send("postJson方式的请求"+req.body.username+'---'+req.body.age) })

~put请求：

fetch("http://localhost:3000/books/000",{ method:"put", body:JSON.stringify({ username:"xiaoming", age:60 }), headers:{ "Content-Type":"application/json" } }).then(data => { return data.text() }).then(ret => { console.log(ret); }) app.put("/books/:id",(req,res) => { res.send("postJson方式的请求"+req.body.username+'---'+req.body.age+'---'+req.body) })

响应结果

.text（）：将响应结果转换为字符串 .json（）：将响应结果以json形式

axios

<script type="text/javascript"> axios.get("http://localhost:3000/test") .then(ret => { console.log(ret.data); }) </script> app.get("/test",(req,res) => { res.send("helloaxios") })

请求方式

~get请求方式： url参数：

axios.get("http://localhost:3000/test?id=abc") .then(function(ret){ console.log(ret.data); }) app.get("/test",(req,res) => { res.send("get url参数普通方式请求"+req.query.id) })

Restful参数：

axios.get("http://localhost:3000/test/cba") .then(function(ret){ console.log(ret.data); }) app.get("/test/:id",(req,res) => { res.send("get url参数Restful方式请求"+req.params.id) })

params参数：

axios.get("http://localhost:3000/test",{ params:{ id:"acb" } }) .then(function(ret){ console.log(ret.data); }) app.get("/test",(req,res) => { res.send("get url参数params方式请求"+req.query.id) })

~delete请求：

axios.delete("http://localhost:3000/test/321",{ params:{ uname:"lisi", age:20 } }) .then(function(ret){ console.log(ret.data); }) app.delete("/test/:id",(req,res) => { res.send("delete方式请求"+req.query.uname+req.query.age+req.params.id) })

~post请求： json方式：

axios.post("http://localhost:3000/test",{ uname:"lisi", age:20 }) .then(function(ret){ console.log(ret.data); }) app.post("/test",(req,res) => { res.send("post json方式请求"+req.body.uname+'---'+req.body.age) })

字符串方式：

var params = new URLSearchParams(); params.append('uname','zhangsan'); params.append('age',20); axios.post("http://localhost:3000/test",params) .then(function(ret){ console.log(ret.data); }) app.post("/test",(req,res) => { res.send("post 字符串方式请求"+req.body.uname+'---'+req.body.age) })

~put请求：

axios.put("http://localhost:3000/test/123",{ uname:"lisi", age:20 }) .then(function(ret){ console.log(ret.data); }) app.put("/test/:id",(req,res) => { res.send("put方式请求"+req.body.uname+'---'+req.body.age+'---'+req.params.id) })

axios全局配置

axios.defaults.timeout=3000；设置超时 axios.defaults.baseURL="…"设置默认地址 axios.defaults.headers[’…’]设置请求头

axios拦截器

1、请求拦截器

axios.interceptors.request.use(function(res){ res.headers.mytoken= "nihao" return res },function(err){ console.log(err); }) axios.get("http://localhost:3000/test") .then(function(res){ console.log(res.data); })

2、响应拦截器：

axios.interceptors.response.use(function(res) { var data = res.data return data }) axios.get("http://localhost:3000/test") .then(function(res){ console.log(res); })

async-await

async function fn(){ var res = await axios.get("http://localhost:3000/test") return res; } fn().then(res => { console.log(res.data); })