深入剖析axios
一、深入剖析axios
Axios是一个基于promise的HTTP库
浏览器支持情况：Chrome、Firefox、Safari、Opera、Edge、IE8+
1.引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
2.API
- axios(config)
- axios(url, [config])
3.config 配置对象
最常用的配置：
axios({
method: 'get', // post、get、put....
baseURL: '', // 请求的域名，基本地址
url: '', // 请求的路径
params: {
}, // 会将请求参数拼接在url上
data: {
}, // 会将请求参数放在请求体中
headers: {
}, // 设置请求头，例如设置token等
timeout: 1000, // 设置请求超时时长，单位：ms
})
4.方法别名
为方便起见，为所有支持的请求方法提供了别名。
- axios.request(config)
- axios.get(url, [config])
- axios.post(url, [data], [config]])
- axios.delete(url, [config])
- axios.head(url, [config])
- axios.put(url, [data], [config])
- axios.patch(url, [data], [config]])
- axios.options(url, [config])
5.配置默认值
可以指定将被用在各个请求的配置默认值
1.全局配置
axios.defaults.baseURL = 'https://developer.duyiedu.com/vue';
axios.defaults.timeout = 1000;
在实际项目中，很少用全局配置。
2.实例配置
可以使用自定义配置新建一个axios实例
const instance = axios.create({
baseURL: 'https://developer.duyiedu.com/vue',
timeout: 1000,
})
instance.get('/getUserInfo').then(res => {
// ...
})
3.请求配置
const instance = axios.create();
instance.get('/getUserInfo', {
timeout: 5000
})
4.配置的优先顺序
全局 < 实例 < 请求
6.并发
同时进行多个请求，并统一处理返回值
- axios.all(iterable)
- axios.spread(callback)
axios.all([
axios.get('/a'),
axios.get('/b')
]).then(axios.spread((aRes, bRes) => {
console.log(aRes, bRes);
}))
7.拦截器
interceptors，在发起请求之前做一些处理，或者在响应回来之后做一些处理。
1.请求拦截器
axios.interceptors.request.use(config => {
// 在发送请求之前做些什么
return config;
});
axios.interceptors.request.use(config => {
// 在发送请求之前做些什么
if(config.method === 'get') {
// ...
} else if(config.method === 'post') {
// ..
}
return config;
}, error => {
alert('xxxx');
return Promise.reject(error);
});
2.响应拦截器
axios.interceptors.response.use(response => {
// 对响应数据做点什么
return response;
});
const interceptor = axios.interceptors.response.use(response => {
// 对响应数据做点什么
if(response.status === 200) {
return response.data;
} else {
// ...
}
}, error => {
// console.log(error.request);
// console.log(error.response);
return Promise.reject(error);
});
3.移除拦截器
const myInterceptor = axios.interceptors.request.use(config => {
});
axios.interceptors.request.eject(myInterceptor);//移除拦截器
4.为axios实例添加拦截器
const instance = axios.create();
instance.interceptors.request.use(config => {
});
8.取消请求
用于取消正在进行的http请求
const source = axios.CancelToken;
const source = CancelToken.source();
axios.get('/getUserInfo', {
cancelToken: source.token
}).then(res => {
console.log(res);
}).catch(error => {
if(axios.isCancel(error)) {
// 取消请求
console.log(error.message);
} else {
// 处理错误
}
})
// 取消请求 参数 可选
source.cancel('取消请求');
9.错误处理
在请求错误时进行的处理
request / response 是error的上下文，标志着请求发送 / 得到响应
在错误中，如果响应有值，则说明是响应时出现了错误。
如果响应没值，则说明是请求时出现了错误。
在错误中，如果请求无值，则说明是请求未发送出去，如取消请求。
axios.get('/user/12345')
.catch(function (error) {
// 错误可能是请求错误，也可能是响应错误
if (error.response) {
// 响应错误
} else if (error.request) {
// 请求错误
} else {
console.log('Error', error.message);
}
console.log(error.config);
});
在实际开发过程中，一般在拦截器中统一添加错误处理
请求拦截器中的错误，会当请求未成功发出时执行，但是要注意的是：取消请求后，请求拦截器的错误函数也不会执行，因为取消请求不会抛出异常，axios对其进行了单独的处理。
在更多的情况下，我们会在响应拦截器中处理错误。
const instance = axios.create({
});
instance.interceptors.request(config => {
}, error => {
return Promise.reject(error);
})
instance.interceptors.response(response => {
}, error => {
return Promise.reject(error);
})
10.axios 预检
当axios的请求为非简单请求时，浏览器会进行预检，及发送OPTIONS请求。请求到服务器，询问是否允许跨域。如果响应中允许预检中请求的跨域行为，则浏览器会进行真正的请求。否则会报405错误。