认识axios和axios在vue中的模块封装(笔记)

axios的全局配置和实例

//配置全局属性
axios.defaults.baseURL&＃61;&＃39;http://localhost:9999/API&＃39;
axios.defaults.timeout&＃61;5//创建axios的实例 只有使用这个实例的时候才会生效
let newVar &＃61; axios.create({baseUTL:&＃39;http://localhost/API&＃39;,timeout:5000
})
//使用方式
newVar({url:&＃39;&＃39;
})


axios的并发请求

//第一种方式
axios.all([axios.get(&＃39;http://localhost:9999/API1&＃39;)axios.get(&＃39;http://localhost:9999/API2&＃39;)
]).then(res&＃61;>{//请求成功响应的是一个数组console.log(res[0])console.log(res[1])
}).catch(err&＃61;>{console.log(err)
})


//第二种方式
axios.all([axios.get(&＃39;http://localhost:9999/API1&＃39;)axios.get(&＃39;http://localhost:9999/API2&＃39;)
]).then(axios.spread((res1,res2)&＃61;>{console.log(res1)console.log(res2)})
).catch(err&＃61;>{console.log(err)
})


axios的拦截器

axios.interceptors.request.use 请求拦截器
axios.interceptors.response.use 响应拦截器


axios给我们提供了两大类拦截器一种是请求方向的拦截&＃xff08;成功请求&＃xff0c;失败的&＃xff09;

另一种是响应方向的&＃xff08;成功的&＃xff0c;失败的&＃xff09;

拦截器的作用 用于我们在网络请求的时候在发起请求或者响应时对操作进行响应的处理

发起请求时可以添加网页加载的动画 使用token认证时

响应的时候可以进行相应的数据处理

//请求方向拦截器
axios.interceptors.request.use(config&＃61;>{console.log("进入请求拦截器")console.log(config)return config //一定要return放行
}),err&＃61;>{console.log("请求方向失败")console.log(err)
}axios.get(&＃39;http://localhost:9999/API&＃39;).then(res&＃61;>{console.log(res)
})


//响应方向拦截器
axios.interceptors.response.use({console.log("进入响应拦截器")console.log(config)return config //一定要return放行
}),err&＃61;>{console.log("响应方向失败")console.log(err)
}axios.get(&＃39;http://localhost:9999/API&＃39;).then(res&＃61;>{console.log(res)
})


axios在vue中的模块封装

第一种方式

//封装位置
import axios from &＃39;axios&＃39;
export function request(config,success,faill){axios({url:config}).then(res&＃61;>{success(res)}).catch(err&＃61;>{fail(err)})
}//调用者位置
import { request } from &＃39;./request.js&＃39;
request(&＃39;http://localhost:9999/API&＃39;,res&＃61;>{console.log(res)
},err&＃61;>{console.log(err)
})

第二种方式

//封装位置
import axios from &＃39;axios&＃39;
export function request(config){
axios.defaults.baseURL&＃61;"http://localhost:9999/API"axios(config.url).then(res&＃61;>{config.success(res)}).catch(err&＃61;>{config.fail(err)})
}//调用者位置
import { request } from &＃39;./request.js&＃39;
request({url:&＃39;user&＃39;,success:res&＃61;>{console.log(res)},fail:err&＃61;>{console.log(err)}
})


第三种方式

//封装的位置
import axios from &＃39;axios&＃39;
export function request(config){return new Promise((resolve, reject)&＃61;>{let newVar &＃61; axios.create({baseURL:&＃39;http://localhost:9999/API&＃39;,timeout:5000})newVar(config).then(res&＃61;>{resolve(res)}).catch(err&＃61;>{reject(err)})})
}//调用者位置
import { request } from &＃39;./request.js&＃39;
request({url:&＃39;getAllStudent&＃39;
}).then(res&＃61;>{console.log(res)
}).catch(err&＃61;>{console.log(err)
})


第四种方式 (推荐使用)

//封装位置
import axios from &＃39;axios&＃39;
export function request(config){let newVar &＃61; axios.create({baseURL:&＃39;http://localhost:9999/API&＃39;,timeout:5000})return newVar(config)
}//调用者位置
import { request } from &＃39;./request.js&＃39;
request({url:&＃39;getAllStudent&＃39;
}).then(res&＃61;>{console.log(res)
}).catch(err&＃61;>{console.log(err)
})