轻松入门vue系列
项目中一般结合async/await语法使用axios调用接口
1. 接口调用方式
原生ajax、基于jQuery的ajax、fetch、axios
2. 传统的URL
格式:schema://host:port/path?query#fragment
- schema:协议,例如http、https、ftp等。
- host:域名或者IP地址。
- port:端口,http默认端口80,可以省略。
- path:路径,例如/abc/a/b/c
- query:查询参数,例如uname=lisi&age=12
- fragment:锚点(哈希Hash),用于定位页面的某个位置
3. Restful形式的URL
HTTP请求方式
- GET 查询
- POST 添加
- PUT 修改
- DELETE 删除
JS中常见的异步调用:定时任务、ajax、事件函数
Promise是异步编程的一种解决方案,从语法上讲,Promise是一个对象,从它可以获取异步操作的消息。
使用Promise主要有以下好处:
实例化Promise对象,构造函数中传递函数,该函数中用于处理异步任务。
resolve和reject两个(方法)参数用于处理成功和失败两种情况,并通过p.then获取处理结果。
var p = new Promise(function(resolve,reject){
//成功时调用resolve()
//失败时调用reject()
});
p.then(function(ret){
//从resolve得到正常结果
},function(ret){
//从reject得到错误信息
});
返回该实例对象用于调用下一个then
p.then(function(ret){
return new Promise(...)
}).then(...)
返回的普通值会直接传递给下一个then,通过then函数中函数的参数接收该值(底层会对返回的普通值封装为一个Promise使得能够继续调用then)
p.then(function(ret){
return '莫逸风';
}).then(function(ret){
alert(ret); //莫逸风
})
上方调用方式会调用后端,产生跨域问题(解决方案回头仔细研究,先放一段代码(SpringBoot))
跨域解决方案参考
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
@Configuration
public class CorsConfig {
public CorsConfig(){
}
@Bean
public CorsFilter corsFilter(){
//1.添加cors配置信息
CorsConfiguration config = new CorsConfiguration();
config.addAllowedOrigin("http://localhost:63343");
//设置是否发送cookie信息
config.setAllowCredentials(true);
//设置允许请求的方式
config.addAllowedMethod("*");
//设置允许的header
config.addAllowedHeader("*");
//2.为url添加映射路径
UrlBasedCorsConfigurationSource corsSource = new UrlBasedCorsConfigurationSource();
corsSource.registerCorsConfiguration("/**",config);
//3.返回从新定义好的corsSource
return new CorsFilter(corsSource);
}
}
p.then() //得到异步任务的处理结果
p.catch() //获取异常信息
p.finally() //成功与否都会执行(尚且不是正式标准)
demo
Promise.all()并发处理多个异步任务,所有任务都执行完成才能得到结果
Promise.race()并发处理多个异步任务,只要有一个任务完成就能得到结果
demo
更加简单的数据获取方式,功能更强大、更灵活,可以看做是xhr的升级版
基于Promise实现
语法结构
fetch(url).then(fn2)
.then(fn3)
...
.cach(fn)
基本用法
fetch('/abc').then(data=>{
return data.text();
}).then(ret=>{
//这里得到的才是最终的数据
console.log(ret);
})
demo
method(String):HTTP请求方法,默认为GET(GET、POST、PUT、DELETE)
body(String):HTTP的请求参数
headers(Object):HTTP的请求头,默认为{}
常规
restful形式
参数form表单形式
fetch('http://localhost:8088/login',{
method:'post',
body:,
headers:{
'Content-Type':'application/x-www-form-urlencoded',
}
}).then(function (data) {
return data.text();
}).then(function (data) {
alert(data);
})
参数json表单形式
fetch('http://localhost:8088/login',{
method:'post',
body:JSON.stringify({
name:'莫逸风',
pass:'1234',
}),
headers:{
'Content-Type':'application/json',
}
}).then(function (data) {
return data.text();
}).then(function (data) {
alert(data);
});
text():将返回体处理成字符串类型
json():返回结果和JSON.parse(responseText)一样
fetch('http://localhost:8088/sayhi?name=莫逸风',{
method:'get'
}).then(function (data) {
return data.json();
}).then(function (data) {
alert(data);
});
axios(官网:https://github.com/axios/axios)是一个基于Promise用于浏览器和node.js的HTTP客户端
中文说明文档
它具有一下特征:
//去github下载文件,此js位于axios-master\dist
通过URL传递参数
axios.get('http://localhost:8088/sayhi?name=莫逸风').then(function (ret) {
alert(ret.data)
})
restful风格接口
通过params选项传递参数
axios.get('http://localhost:8088/sayhi',{
params:{
name:"莫逸风"
}
}).then(function (ret) {
//data属性是固定的用法,用于获取后台的实际数据
alert(ret.data)
})
通过对象传递参数(默认传递的是json格式的数据)
axios.post('http://localhost:8088/login',{
name:"莫逸风",
pass:"1234",
}).then(function (ret) {
//data属性是固定的用法,用于获取后台的实际数据
alert(ret.data)
})
通过URLSearchParams传递参数(application/x-www-form-urlencoded)
var param = new URLSearchParams();
param.append('name','莫逸风');
param.append('pass','12345');
axios.post('http://localhost:8088/login',param).then(function (ret) {
//data属性是固定的用法,用于获取后台的实际数据
alert(ret.data)
})
axios.post('http://localhost:8088/login',param).then(function(ret){
console.log(ret);//所有数据都包含在此对象中
//对于json形式的响应数据可以直接获取,不需要转换
alert(ret.data.name);
})
axios.defaults.timeout = 3000; //超时时间
//默认地址,再写请求的时候只需要写后面的路由就行了
axios.defaults.baseURL = 'http://localhost:3000/app';
axios.defaults.headers['mytoken']='aqwerwqwerqwer2ewrwe23eresdff23'//设置请求头
demo
//配置请求的基准URL地址
axios.defaults.baseURL = 'http://localhost:8088/';
axios.get('sayhi?name=莫逸风').then(function (ret) {
//data属性是固定的用法,用于获取后台的实际数据
alert(ret.data)
})
//注意,添加请求头跨域需要后端设置AllowedHeader
//修改请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
请求拦截器
在请求发出之前设置一些信息
axios.interceptors.request.use(function (config) {
config.baseURL = "http://localhost:8088/";
alert(config.url);
return config;
},function (err) {
console.log(err);
})
axios.get('sayhi?name=莫逸风').then(function (ret) {
//data属性是固定的用法,用于获取后台的实际数据
alert(ret.data)
})
响应拦截器(拦截器放到请求之上)
在获取数据之前对数据做一些加工处理
axios.interceptors.response.use(function (res) {
var data = res.data;
return data;
},function (err) {
console.log(err);
})
axios.get('sayhi?name=莫逸风').then(function (res) {
//data属性是固定的用法,用于获取后台的实际数据
alert(res)
})
async/await是ES7引入的语法,可以更加方便的进行异步操作
async关键字用于函数上(async函数的返回值是Promise实例对象)
await关键字用于async函数中(await可以得到异步的结果)
await后跟一个Promise对象实现异步任务,async返回值是一个Promise对象
不需要.then来保证顺序。