axios
参数的传递
get和delete请求参数
-
通过传统的url 以 ? 的形式传递参数
let obj = { id: "10", name: "xiaohong" } let s = "http://127.0.0.1:8080/user" let s1 = "" for (let key in obj) { s1 += `${key}=${obj[key]}&` } s += "?" + s1.substring(0, s1.length - 1) axios.get(s).then(data => { console.log(data) })
-
restful 形式传递参数
router.get("/user/:id/:name",(req,res,next)=>{
res.json(
req.params
)
})
axios.get("http://127.0.0.1:8080/user/11/xiaohuang").then(data => {
console.log(data)
})
-
通过params 形式传递参数
axios.get("http://127.0.0.1:8080/user",{params:{ id:"11", name:"zhizhenjin" }}).then(data => { console.log(data) })
post和put请求传递参数
-
通过选项传递参数
axios.post("/user/path",{ sex:"男", name:"mengnan", avg:18 }).then(data=>{ console.log(data) })
-
通过 URLSearchParams 传递参数
let params=new URLSearchParams() let obj1={ sex:"男", name:"mengnan", avg:18 } for(let key in obj1){ params.append(key,obj1[key]) } axios.post("/user/path1",params).then(data=>{ console.log(data) })
axios全局配置
#配置公共的请求头
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拦截器
请求拦截器
-
请求拦截器的作用是在请求发送前进行一些操作
- 例如在每个请求体里加上token,统一做了处理如果以后要改也非常容易
# 1. 请求拦截器 axios.interceptors.request.use(function(config) { console.log(config.url) # 1.1 任何请求都会经过这一步 在发送请求之前做些什么 config.headers.mytoken = 'nihao'; # 1.2 这里一定要return 否则配置不成功 return config; #config中含有与请求相关的参数 }, function(err){ #1.3 对请求错误做点什么 console.log(err) })
响应拦截器
- 响应拦截器的作用是在接收到响应后进行一些操作
- 例如在服务器返回登录状态失效,需要重新登录的时候,跳转到登录页
#2. 响应拦截器
axios.interceptors.response.use(function(res) {
#2.1 在接收响应做些什么
var data = res.data;
#2.2 一定需要返回值,不然拦截器不生效
return data;
}, function(err){
#2.3 对响应错误做点什么
console.log(err)
})
移除拦截器
var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);
async与await
-
async作为一个关键字放到函数前面
- 任何一个 async 函数都会隐式返回一个 promise
-
await 关键字只能在使用 async 定义的函数中使用
- await后面可以直接跟一个 Promise实例对象
- await函数不能单独使用
-
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) })