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请求传递参数
扫描二维码关注公众号，回复：
13582325 查看本文章
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){
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)
})