前后端交互

接口调用方式：
- 原生ajax
- 基于jQuery的ajax
- fetch
- axios；

Restful形式的URL：http://www.hello.com/books/123

异步调用：
JS中常见的异步调用：
- 定时任何
- ajax
- 事件函数
如果多次异步，不会依赖于书写顺序执行，因为返回的数据时间不同；
如果需要顺序执行，需要在success里面嵌套（回调地狱）；

Promise：
一个对象，构造函数；
- 主要解决异步深层嵌套的问题
- promise 提供了简洁的API 使得异步操作更加容易；

基本语法：var p = new Promise(function(resolve, reject){
  			//这里用于实现异步任务
  			setTimeout(function(){
    				var flag = false;
    				if(flag) {
     				 // 正常情况
      					resolve('hello');
    				}else{
     				 // 异常情况
      					reject('出错了');
    				}
  			}, 100);
	 });
	 p.then(function(data){
  			console.log(data)；//正确
		},function(info){
  			console.log(info); //错误
		});

成功的处理的回调函数，可以有返回值，这个返回值可以是两种类型：
	1：返回一个Promise实例对象，则后续可以继续调用then方法获取这个Promise对象的结果；
	2：返回一个其他类型的数据，也可以使用then方法直接获取返回的这个值；

Promise  基本API:
	实例方法：
		.then()- 得到异步任务正确的结果
		.catch()- 获取异常信息
		.finally()- 成功与否都会执行（不是正式标准）;

	对象方法：
		Promise.all():  处理多个异步任务，所有任务执行完成之后才能得到结果；得到所有结果；
		Promise.race():  处理多个异步任务，只要有一个任务完成就能得到结果，得到最快返回的结果；

Fetch：
fetch(‘url’).then(data =>{ return data.text() }.then( ret=>{ conlose.log(ret); });
.text()：将获取到的数据 转换成字符串,返回一个Promise实例对象，用于获取后台返回的数据;
.json(): 将获取到的数据使用 json 转换对象;

Fetch API 调用接口传递参数:
#1.1 GET参数传递 - 传统URL 通过url ？ 的形式传参
fetch(‘http://localhost:3000/books?id=123’, {
# get 请求可以省略不写 默认的是GET
method: ‘get’
})
.then(function(data) {
# 它返回一个Promise实例对象，用于获取后台返回的数据
return data.text();
}).then(function(data) {
# 在这个then里面我们能拿到最终的数据
console.log(data)
});

  #1.2  GET参数传递  restful形式的URL  通过/ 的形式传递参数  即  id = 456 和id后台的配置有关   
    fetch('http://localhost:3000/books/456', {
        	# get 请求可以省略不写 默认的是GET 
            method: 'get'
        })
        .then(function(data) {
            return data.text();
        }).then(function(data) {
            console.log(data)
        });

   #2.1  DELETE请求方式参数传递      删除id  是  id=789
    fetch('http://localhost:3000/books/789', {
            method: 'delete'
        })
        .then(function(data) {
            return data.text();
        }).then(function(data) {
            console.log(data)
        });

   #3 POST请求传参
    fetch('http://localhost:3000/books', {
            method: 'post',
        	# 3.1  传递数据 
            body: 'uname=lisi&pwd=123',
        	#  3.2  设置请求头 
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        })
        .then(function(data) {
            return data.text();
        }).then(function(data) {
            console.log(data)
        });

   # POST请求传参
    fetch('http://localhost:3000/books', {
            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)
        });

    # PUT请求传参     修改id 是 123 的 
    fetch('http://localhost:3000/books/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)
        });

axios:
- 基于promise用于浏览器和node.js的http客户端
- 支持浏览器和node.js
- 支持promise
- 能拦截请求和响应
- 自动转换JSON数据
- 能转换请求和响应数据;

axios基本用法：注意data属性是固定的用法，用于获取后台的实际数据：

# 1. 发送get 请求 
  axios.get('http://localhost:3000/adata').then(function(ret){ 
  #  拿到 ret 是一个对象      所有的对象都存在 ret 的data 属性里面
  // 注意data属性是固定的用法，用于获取后台的实际数据
  // console.log(ret.data)
  console.log(ret)
})

# 2.  get 请求传递参数
# 2.1  通过传统的url  以 ? 的形式传递参数
axios.get('http://localhost:3000/axios?id=123').then(function(ret){
  console.log(ret.data)
})

# 2.2  restful 形式传递参数 
axios.get('http://localhost:3000/axios/123').then(function(ret){
  console.log(ret.data)
})

# 2.3  通过params  形式传递参数 
axios.get('http://localhost:3000/axios', {
  params: {
    id: 789
  }
}).then(function(ret){
  console.log(ret.data)
})

#3 axios delete 请求传参     传参的形式和 get 请求一样
axios.delete('http://localhost:3000/axios', {
  params: {
    id: 111
  }
}).then(function(ret){
  console.log(ret.data)
})

 # 4  axios 的 post 请求
# 4.1  通过选项传递参数
axios.post('http://localhost:3000/axios', {
  uname: 'lisi',
  pwd: 123
}).then(function(ret){
  console.log(ret.data)
})

# 4.2  通过 URLSearchParams  传递参数 
var params = new URLSearchParams();
params.append('uname', 'zhangsan');
params.append('pwd', '111');
axios.post('http://localhost:3000/axios', params).then(function(ret){
  console.log(ret.data)
})

 #5  axios put 请求传参   和 post 请求一样 
axios.put('http://localhost:3000/axios/123', {
  uname: 'lisi',
  pwd: 123
}).then(function(ret){
  console.log(ret.data)
})

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

axios 全局配置：
# 配置公共的基准URL地址
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’;

axios拦截器：
# 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)
})

async 和 await：
- async作为一个关键字放到函数前面，返回值是Promise实例对象；
- 任何一个async函数都会隐式返回一个promise
- await关键字只能在使用async定义的函数中使用
- await后面可以直接跟一个 Promise实例对象
- await函数不能单独使用
- async/await 让异步代码看起来、表现起来更像同步代码；-