axios和(async,await)[通俗易懂] -金沙1005

axios和(async,await)

1.基于promise用于浏览器和node.js的http客户端

2.支持浏览器和node.js;

3.支持promise;

4.能拦截请求和响应请求;

5.自动转换json数据;

6.能转换请求和响应数据;

1.axios基本用法

1.get和delete请求传递参数

​ 1.通过传统的url以?的形式传递参数;

​ 2.restful形式传参;

​ 3.通过params形式传递参数;

2.post和put请求传递参数

​ 1.通过选项传递参数;

​ 2.通过urlsearchparams传递参数;

    # 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)
})

为防止网络爬虫，请关注公众号回复”口令”

激活idea 激活clion

datagrip dataspell

dotcover dotmemory

dottrace goland

phpstorm pycharm

resharper reshac

rider rubymine

webstorm 全家桶

解锁下载

2.axios全局配置

//配置公共的请求头
axios.defaults.baseurl = 'https://127.0.0.1:3000/api'
// 配置超时时间
axios.defaults.timeout = 3000;
// 配置公共请求头
axios.defaults.headers.common['authorization'] = auth_token;
//配置公共的post的content-type
axios.defaults.headers.post['content-type'] = 'application/x-www-form-urlencoded';

3.axios拦截器

1.请求拦截器: 请求拦截器的作用是在请求发送前进行一些操作,例如:在每个请求体中加上token,统一做了处理 后要改也很简单;

2.响应拦截器: 响应拦截器的作用是在接收到响应后进行的一些操作,如:在服务器返回登录状态失效,需要重新 登录的时候,跳转到登录页;

​

//1.请求拦截器
axios.interceptors.request.use(function(config){ 

console.log(config.url)
//任何一部都会经过这一步,在发送请求前做些什么
config.headers.mytoken = 'token字符串'
//这里一定要return 否则配置不成功
return config
},function(err){ 

//请求错误的时候
console.log(err)
})
//2.响应拦截器
axios.interceptors.response.use(function(res){ 

//接收响应后做些什么
var data = res.data;
return data;
},function(err){ 

//打印错误
console.log(err)
})

4.async 和await

1.async作为一个关键字放在函数前边,任何一个async函数都会隐式返回一个promise;

2.await 关键字只能在使用async定义的函数中使用,await后面可以直接跟一个promise实例对象,await 函数不能单独使用;

3.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)
})