接口调用--axios 和 async/await 用法

目录导读：
1\ axios 基本特征
2\ axios 基础用法
3\ axios 响应结果
4\ axios 全局配置
5\ axios 拦截器

1\ async/await 基本用法
2\ async/await 处理多个异步请求

接口调用 — axios 用法

1\ axios 基本特征

axios (官网：https://github.com/axios/axios) 是一个基于 Promise 用于浏览器和 node.js 的 HTTP 客户端。或者参考。

特征如下：

• 支持浏览器和 node.js
• 支持 promise
• 能拦截请求和响应
• 自动转换 JSON 数据
• 能转换请求和响应数据

2\ axios 基础用法

• get 和 delete 请求传递参数

  • 通过传统的 url 以 ？的形式传递参数
  • restful 形式传递参数
  • 通过 params 形式传递参数

• post 和 put 请求传递参数

  • 通过选项传递参数
  • 通过 URLSearchParams 传递参数

代码示例：

# 1. 发送get 请求 
axios.get('http://localhost:3000/adata').then(function(ret){
      
	# 拿到 ret 是一个对象 所有的对象都存在 ret 的data 属性里面 
	// 注意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) 
})

3\ axios 响应结果

具体以后台实际返回为准

主要属性：
data：实际响应回来的数据，此属性是固定的用法
headers：响应头信息
status：响应状态码
statusText：响应状态信息

4\ axios 全局配置

# 配置公共的请求地址
axios.defaults.baseURL = 'https://api.example.com'; 

# 配置超时时间
/* 发送请求时超出此设置时间就认为请求接口出错, 可以通过 try-catch 获取报错信息
*  其中请求头 token 名称和配置由后台完成。
*/
axios.defaults.timeout = 2500; 

# 配置公共的请求头 
axios.defaults.headers['mytoken'] = AUTH_TOKEN;
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; 

# 配置公共的 post 的 Content-Type 
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

5\ axios 拦截器

• 请求拦截器
  • 请求拦截器的作用是在请求发送前进行一些操作
    • 例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易
• 响应拦截器
  • 响应拦截器的作用是在接收到响应后进行一些操作
    • 例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页

简单示例：

# 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 用法

1\ async/await 基本用法

• async/await 是 ES7 引入的新语法，更加方便的进行异步操作
• async 关键字用于函数上（async 函数返回值是 Promise 实例对象）
• await 关键字只能用于 async 函数当中，后面可以直接跟一个 Promise 实例对象（await 可以得到异步结果）

简单示例：

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

2\ async/await 处理多个异步请求

如当一个请求需要基于另一个请求的返回结果时，简单示例：

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

综合示例：
async/await 让异步代码看起来、表现起来更像同步代码

# 1. async 基础用法 
# 1.1 async作为一个关键字放到函数前面 
async function queryData() {
      
	# 1.2 await关键字只能在使用async定义的函数中使用 await后面可以直接跟一个 Promise实例对象 
	var ret = await new Promise(function(resolve, reject){
      
		setTimeout(function(){
      
			resolve('nihao') 
		},1000); 
	})
	console.log(ret.data) 
	return ret; 
}
# 1.3 任何一个async函数都会隐式返回一个promise 我们可以使用then 进行链式编程 
queryData().then(function(data){
      console.log(data) })

#2. async 函数处理多个异步函数 
axios.defaults.baseURL = 'http://localhost:3000'; 
async function queryData() {
      
	# 2.1 添加await之后 当前的await 返回结果之后才会执行后面的代码 
	var info = await axios.get('async1'); 
	#2.2 让异步代码看起来、表现起来更像同步代码 
	var ret = await axios.get('async2?info=' + info.data); 
	return ret.data; 
}
queryData().then(function(data){
      console.log(data) })