DOVE-----Vue.js框架入门（七）

最新推荐文章于 2021-10-12 17:05:44 发布

Dove____

最新推荐文章于 2021-10-12 17:05:44 发布

阅读量331

点赞数

本文链接：https://blog.csdn.net/Dove____/article/details/107701447

版权

第四周学习内容整理

前后端交互

1、前后端调用模式

接口调用方式
原生ajax
基于jQuery的ajax
fetch
axios
传统形式的URL

格式：schema://host:post/path?query#fragment
schema:协议。例如http、https、ftp等
host:域名或者IP地址
port:端口，http默认端口80，可以省略
path:路径，例如/abc/a/b/c
query:查询数据，例如uname=lisi&age=12
fragment:锚点（哈希Hash），用于定位页面的某个位置

符合规则的URL
http://www.itcast.cn
http://www.itcast.cn/java/web
http://www.itcast.cn/java/web?flag=1
http://www.itcast.cn/java/web?flag=1#function

Restful形式的URL

HTTP请求方式
GET查询
POST添加
PUT修改
DELETE删减

符合规则的URL地址
http://www.hello.cim/booksGET
http://www.hello.cim/booksPOST
http://www.hello.cim/books/123PUT
http://www.hello.cim/books/123DELETE

2、promise用法

异步调用
异步效果分析
定时任何
ajax
事件函数
多次异步调用的依赖分析
多次异步调用的结果顺序不确定
异步调用结果如果不存在依赖需要嵌套
Promise概述
Promise是异步编程的一种解决方案，从语法上讲，Promise是一个对象，从它可以获取异步操作的消息。
好处：
可以避免多层异步调用嵌套问题（回调地狱）
promise 提供了简洁的API，使得控制异步操作更加容易
官网:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
Promise基本用法
实例化Promise对象，构造函数中传递函数，该函数中用于处理异步任务
resolve和rejrct两个参数用于处理成功和失败两种情况，并通过p.then获取处理结果

var p = new Promise(function(resolve, reject){
//成功时调用 resolve()
//失败时调用 reject（）
});
p.then(function(ret){
//从resolve得到正常结果
 },function(ret){
//从reject得到错误信息
 });

基于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(xhr.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();
   });

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('finished');
   });

对象方法
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、fenth

基本特性
更加简单的数据获取方式，功能更强大，更灵活，可以看作是xhr的升级版
基于Promise实现
官网：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
语法结构

fetch(url).then(fn2)
          .then(fn3)
          ...
          .catch(fn)

fetch('/abc').then(data=>){
   return data.text(); 
}).then(ret=>{
   //注意这里得到的才是最终数据
   console.log(data); 
});

fetch请求参数
常用配置选项
method(String):HTTP请求方法，默认GET（GET、POST、PUT、DELETE)
body(String):HTTP的请求参数
headers(Object):HTTP的请求头，默认为{}

fetch('/abc', { 
   method: 'get' 
}).then(data=>){
   return data.text();
}).then(ret=>{
 //注意这里得到的才是最终数据
   console.log(ret);
});

GET请求方式的参数传递

fetch('/abc？id=123').then(data=>){
   return data.text();
}).then(ret=>{
 //注意这里得到的才是最终数据
   console.log(ret);
});

fetch('/abc/123', { 
   method: 'get' 
}).then(data=>){
   return data.text();
}).then(ret=>{
 //注意这里得到的才是最终数据
   console.log(ret);
});

DELETE请求方式的参数传递

fetch('/abc/123', { 
   method: 'delete' 
}).then(data=>){
   return data.text();
}).then(ret=>{
 //注意这里得到的才是最终数据
   console.log(ret);
});

POST请求方式的参数传递

fetch('books', { 
   method: 'post',
   body: 'uname=lisi&pwd=123',
   headers: { 
      'content-Type': 'application/x-www-form-urlencoded',
   } 
}).then(data=>){
   return data.text(); 
}).then(ret=>{
   console.log(ret);
});

fetch('/books', {
   method: 'post', 
   body: JSON.stringify({ 
       uname: 'lisi', 
       age: 12 
})
headers: { 
    'Content-Type': 'application/json' ,
} 
}).then(data=>){
   return data.text(); 
}).then(ret=>{
   console.log(ret);
});

fetch响应式结果
响应数据格式
text():将返回体处理成字符串类型
ison():返回结果和JSON。parse(responesText)一样

fetch('/abc') then(data=>){ 
   // return data.text(); 
   return data.json(); 
}).then(ret=>{
  console.log(ret);
});

4、axios用法

axios基本特性
是一个基于Promise用于浏览器和node.js的HTTP客户端
官网https://github.com/axios/axios
特征
支持浏览器和node.js
支持promise
能拦截请求和响应
自动转换JSON数据
axios基本用法

axios.get('/adata')
    .then(ret=>){
    // data属性是固定的用法，用于获取后台响应的数据 
     console.log(ret.data)
    })

axios常用API
get:查询数据
post:添加数据
put:修改数据
delete:删除数据
axios的参数传递
(1)GET传递参数
通过URL传递参数
通过params 选项传递参数

axios.get('/adata？id=123')
    .then(ret=>){
     console.log(ret.data)
    })

axios.get('/adata/123')
    .then(ret=>){
     console.log(ret.data)
    })

axios.get('/adata', { 
        params: { 
           id: 123 
         } 
      })
     .then(ret=>){
     console.log(ret.data)
    })

（2）DELETE传递参数
参数传递与GET相似

axios.delete('/adata？id=123')
    .then(ret=>){
     console.log(ret.data)
    })

axios.delete('/adata/123')
    .then(ret=>){
     console.log(ret.data)
    })

axios.delete('/adata', { 
        params: { 
           id: 123 
         } 
      })
     .then(ret=>){
     console.log(ret.data)
    })

（3）POST传递参数
通过选项传递参数（默认json格式数据）

axios.post('/adata', { 
  uname: 'tom', 
  pwd: 123 
 }) .then(ret=>){
     console.log(ret.data)
    })

通过URLSearchParams传递参数（application/x-www-form-urlencoded)

var params = new URLSearchParams(); 
params.append('param1', 'value1'); 
params.append('param2', 'value2'); 
axios.post('/api/test', params).then(ret=>){ 
   console.log(ret.data) 
})

(4)PUT传递参数

axios.put('/adata/123', { 
   uname: 'item', 
   pwd: 123
   }) .then(ret=>){
     console.log(ret.data)
})

axios的响应结果
响应结果的主要属性
data:实际响应回来的数据
headers:响应头信息
status:响应状态码
statusText:响应状态信息

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

axios的全局配置
axios.defaults.timeout = 3000；//超时时间
axios.defaults.baseURL = ‘https://localhost:3000/app’;//默认地址
axios.defaults.headers.[‘mytoken’] = ‘aqwerwwqwer2ewrwe23eresdf23’;//设置请求头
axios拦截器
（1）请求拦截器
在请求发出之前设置一些信息

//添加一个请求拦截器
axios.interceptors.request.use(function(config) { 
  //在请求发出之前进行一些信息设置
  return config; 
}, function(err){
//处理响应的错误消息
})；

（2）响应拦截器
在获取数据之前对数据做一些加工处理

//添加一个响应拦截器
axios.interceptors.request.use(function(res) { 
  //在这里对返回的数据进行处理
  return res; 
}, function(err){
//处理响应的错误消息
})；

5、async/await的基本用法
async/await是ES7引入的新语法，可以更加方便的使用异步操作
async关键字用于函数上（async函数返回值是Promise实例对象）
await关键字用于async函数当中（await可以得到异步的结果）

async function queryData(id) { 
 const.ret = await axios.get('/data');
 return ret; 
}
queryData(ret=>){
     console.log(ret)
})

async/await处理多个异步请求
多个异步请求的场景

async function queryData(id) { 
  const info = await axios.get('async1'); 
  const ret = await axios.get('async2?info=' + info.data);
   return ret; 
}
queryData(ret=>){
     console.log(ret)
})