axios: 一个专注于网络数据请求的库，简单易用轻量化。
注意：调用 axios 方法返回的是一个 promise 对象
下载安装axios
一、通过 CDN 引用外部资源
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
二、通过 npm 下载
npm i axios -S
常用的请求类型
- GET 向服务器中获取数据
- POST 网服务器中提交数据
- PUT 修改服务服中的数据
- DELETE 删除服务器中的数据
axios.get()方法
注意：axios返回的是一个promise对象
axios.get('请求的url地址', {params: {/*传递给服务器的数据*/}})
// 通过 .then 来指定成功之后的调回函数，服务器返回的数据存放于 res.data 中
.then(res => {
console.log(res.data)
})
// 通过 .catch 方法捕获错误
.catch(err => {
console.log(err)
})
axios.post()方法
axios.post('请求的url地址', {/*传递给服务器的数据*/})
.then(res => {
console.log(res.data)
})
.catch(err => {
console.log(err)
})
直接使用axios()
axios({
method:"请求类型",
url:"请求的URL地址",
data:{/*POST请求参数*/},
params:{/*GET请求参数*/}
})
.then(function(res){
console.log(res.data)
})
.catch(err => {
console.log(err)
})
axios响应结构
{
data: {}, // 服务器返回的内容
status: 200, // 服务器响应的 HTTP 状态码
statusText: 'OK', // 服务器响应的 HTTP 状态信息
headers: {}, // 服务器响应的头
config: {} // 是为请求提供的配置信息
}
axios.defaults 全局配置
使用axios.defaults可以进行axios一些全局的默认配置，如配置请求的根路径、请求头
//配置请求的基准地址
axios.defaults.baseURL = "http://localhost:3000/";
//配置请求头信息
axios.defaults.headers["mytoken"] = "hello";
拦截器
拦截器：每次发起 ajax 请求和得到响应的时候自动被触发的函数(请求拦截器和响应拦截器)。在函数中就可以进行一系列的处理
应用场景：
- token 身份认证
- loading 加载效果
请求拦截器
通过 axios.interceptors.request.use(成功的回调[,失败的回调]) 进行配置请求拦截器
axios.interceptors.request.use(config => {
/* 参数
config 是一个对象，对面里存放着关于当前请求所有的信息、数据。如：请求方式、请求地址、请求时携带的参数、请求头...
*/
// 成功的回调函数
...
// 最后必须将 config return 出去否则所有请求都会失败
return config
},err => {
// 失败的回调函数（可以被省略）
return Promise.reject(err)
})
响应拦截器
通过 axios.interceptors.response.use(成功的回调[,失败的回调]) 进行配置响应拦截器
axios.interceptors.response.use(res => {
/* 参数
res 响应对象。
*/
// 成功的回调函数----可以在回调函数中进行一些处理。如关闭loading效果
...
// 最后必须将 res retrun 出去
return res
},err => {
// 失败的回调函数（可以被省略）
return Promise.reject(err)
})
