Vue前端交互 Promise 1.promise的实例方法 1).then() 得到异步任务正确的结果 2).catch() 获取异常信息 3).finally()成功与否都会执行(不是正式标准) 1.promise return 一个普通值会默认创建一个新的promise对象然后调用 2.promise 中的finally,不论成功与否,都会调用,但是.finally(function(data){console.log(data)})中的data是undefined,是没有数据的 列子1: <script type="text/javascript"> /* 基于Promise发送Ajax请求 */ function queryData(url) { var p = new Promise(function(resolve, reject){ var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState != 4) return; if(xhr.readyState == 4 && xhr.status == 200) { // 处理正常的情况 resolve(xhr.responseText); }else{ // 处理异常情况 reject('服务器错误'); } }; xhr.open('get', url); xhr.send(null); }); return p; } // queryData('http://localhost:3000/data') // .then(function(data){ // console.log(data); // },function(info){ // console.log(info) // }); // ============================ // 发送多个ajax请求并且保证顺序 queryData('http://localhost:3000/data1') .then(function(data){ console.log(data) return queryData('http://localhost:3000/data2') }) .then(function(data){ console.log(data); console.log('-----------------------------------------------------') return 'xiaoming' }) .then(function(data){ console.log(data); }) .finally(function (data) { // body... console.log('haha') }) </script> 2.promise的对象方法 1).all() `Promise.all`方法接受一个数组作参数,数组中的对象(p1、p2、p3)均为promise实例(如果不是一个promise,该项会被用`Promise.resolve`转换为一个promise)。它的状态由这三个promise实例决定 (会把p1,p2,p3都执行了) 2).race()`Promise.race`方法同样接受一个数组作参数。当p1, p2, p3中有一个实例的状态发生改变(变为`fulfilled`或`rejected`),p的状态就跟着改变。并把第一个改变状态的promise的返回值,传给p的回调函数 (p1,p2,p3中的一个执行了,另外两个会继续发送,但不会执行函数内容) all和race好像不能同时使用? fetch 1.概述 Fetch API是新的ajax解决方案 Fetch会返回Promise fetch不是ajax的进一步封装,而是原生js,没有使用XMLHttpRequest对象 fetch(url, options).then() 例子1: <script type="text/javascript"> /* Fetch API 基本用法 fetch(url).then() 第一个参数请求的路径 Fetch会返回Promise 所以我们可以使用then 拿到请求成功的结果 */ fetch('http://localhost:3000/fdata').then(function(data){ // text()方法属于fetchAPI的一部分,它返回一个Promise实例对象,用于获取后台返回的数据 return data.text(); }).then(function(data){ // 在这个then里面我们能拿到最终的数据 console.log(data); }) </script> 2.fetch API 中的 HTTP 请求 fetch(url, options).then() HTTP协议,它给我们提供了很多的方法,如POST,GET,DELETE,UPDATE,PATCH和PUT 1.默认的是 GET 请求 2.需要在 options 对象中指定对应的 method method:请求使用的方法 3.post 和 普通 请求的时候 需要在options 中设置请求头 headers和body 这边也分'Content-Type': 'application/x-www-from-urlencoded'和'application/json' 所以服务器也分app.use(bodyParser.json())和app.use(bodyParser.urlencoded({ extended: false })); 例子2: <script type='text/javascript'> fetch('http://localhost:3000/fdata').then(function (argument) { // body... return argument.text() }).then(function (argument) { // body... console.log(argument) }) fetch('http://localhost:3000/books?id=123',{method:'get'}).then(function (argument) { // body... return argument.text() }).then(function (argument) { // body... console.log(argument) }) fetch('http://localhost:3000/books1/123',{method:'get'}).then(function (argument) { // body... return argument.text() }).then(function (argument) { // body... console.log(argument) }) fetch('http://localhost:3000/books2/123',{method:'delete'}).then(function (argument) { // body... return argument.text() }).then(function (argument) { // body... console.log(argument) }) POST请求传参 fetch('http://localhost:3000/books3', { method: 'post', body: JSON.stringify({ uname: '张三', pwd: '456' }), headers: { 'Content-Type': 'application/json' } }) .then(function(data){ return data.text(); }).then(function(data){ console.log(data) }); fetch('http://localhost:3000/books1/123', { method: 'put', body: JSON.stringify({ uname: '张三', pwd: '789' }), headers: { 'Content-Type': 'application/json' } }) .then(function(data){ return data.text(); }).then(function(data){ console.log(data) }); </script> 3.fetchAPI 中 响应格式 响应结果分为text和JSON 用fetch来获取数据,如果响应正常返回,我们首先看到的是一个response对象,其中包括返回的一堆原始字节,这些字节需要在收到后,需要我们通过调用方法将其转换为相应格式的数据,比如`JSON`,`BLOB`或者`TEXT`等等 例子3: fetch('http://localhost:3000/json').then(function(data){ // return data.json(); // 将获取到的数据使用 json 转换对象 return data.text(); // // 将获取到的数据 转换成字符串 }).then(function(data){ // console.log(data.uname) // console.log(typeof data) var obj = JSON.parse(data); console.log(obj.uname,obj.age,obj.gender) }) PS:text()方法属于fetchAPI的一部分,它返回一个Promise实例对象,用于获取后台返回的数据 axios 1.传参 如果使用params传参,服务端是通过 xx.query.xx来获得参数的,如ret.query.id,如果用params就是undefined 在POST中,现在用URLSearchParams来提交也是返回对象格式,而不是字符串 PUT要传ID进去,不然怎么知道你更新的是哪个对象 2.全局配置 在传递请求头时,要到服务端允许该请求头的跨域使用 # 配置公共的请求头 axios.defaults.baseURL = 'https://api.example.com'; # 配置 超时时间 axios.defaults.timeout = 2500; # 配置公共的请求头 axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; # 配置公共的 post 的 Content-Type axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; 3.拦截器 1.请求拦截器 req 请求拦截器的作用是在请求发送前进行一些操作 2.响应拦截器 res 响应拦截器的作用是在接收到响应后进行一些操作 例子: # 1. 请求拦截器 axios.interceptors.request.use(function(config) { console.log(config.url) # 1.1 任何请求都会经过这一步 在发送请求之前做些什么 config.headers.mytoken = 'nihao'; # 1.2 这里一定要return 否则配置不成功 return config; }, function(err){ #1.3 对请求错误做点什么 console.log(err) }) #2. 响应拦截器 axios.interceptors.response.use(function(res) { #2.1 在接收响应做些什么 var data = res.data; return data; }, function(err){ #2.2 对响应错误做点什么 console.log(err) }) 4.async await后面要接promise实例对象 1.async作为一个关键字放到函数前面 2.任何一个async函数都会隐式返回一个`promise` 3.await关键字只能在使用async定义的函数中使用 4.await后面可以直接跟一个 Promise实例对象 5.await函数不能单独使用