介绍
Axios 是一个基于 promise 的 HTTP 库,可以在浏览器和 node.js 中使用。
特性
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
安装
- 终端执行:
npm install axios
使用
axios函数
- axios 提供了一个axios函数,可以直接通过这个函数发送请求,这个函数接收一个配置对象,我们可以在这个对象里设置请求类型(GET,POST,PUT,delete等),请求的 url,请求体等
axios({
method: 'POST', // 请求类型
url: 'http://localhost:3000/abc', // 请求 url
data: {
title: "今天天气不错, 还挺风和日丽的",
author: "张三"
} // 请求体
}).then(response => {
console.log(response);
})
请求方法别名
- 为了方便,axios 为所有支持的请求方法提供了别名, 在使用别名方法时,url,method,data 这些属性都不必在配置中指定.
- axios.request(config)
axios.request({
method:'GET',
url: 'http://localhost:3000/abc'
}).then(response => {
console.log(response);
})
- axios.get(url[, config])
axios.get('http://localhost:3000/abc' ).then(response => {
console.log(response);
})
- axios.post(url[, data[, config]])
axios.post(
'http://localhost:3000/abc',
{
"body": "喜大普奔",
"postId": 2
}
).then(response => {
console.log(response);
})
- axios.delete(url[, config])
- axios.head(url[, config])
- axios.options(url[, config])
- axios.put(url[, data[, config]])
- axios.patch(url[, data[, config]])
默认配置
- axios 给我们提供了默认配置的 api,通过默认配置 api,我们可以设置基础 url、默认请求方式、默认参数、超时时间、请求头参数等等,设置的这些默认配置将会被用在各个请求中。
axios.defaults.method = 'GET';//设置默认的请求类型为 GET
axios.defaults.baseURL = 'http://localhost:3000';//设置基础 URL
axios.defaults.params = {id:100};// 设置默认参数
axios.defaults.timeout = 3000;// 超时时间
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
设置默认参数后,我们再实现请求的时候就会变的简单
axios({// 这里请求不在设置请求方式,响应时间等,会使用默认设置的
url: '/posts' // 这里我们只需求指定路径即可,会自动帮我们把 BaseUrl 加上
}).then(response => {
console.log(response);
})
实例对象
- axios 提供了使用实例对象的方式发送请求
const axios1 = axios.create({// 创建axios实例对象时,可以设置默认配置
baseURL: 'https://abc.com',
timeout: 5000
});
const axios2 = axios.create({
baseURL: 'https://def.com',
timeout: 2000
});
axios1.get('/getJoke').then(response => {
console.log(response.data)
})
axios2({
url: '/getJoke',
}).then(response => {
console.log(response);
});
上面我们求创建了两个axios对象,axios1 和 axios2, 使用实例对象有什么好处呢? 我们使用axios默认配置的时候,默认配置只能配置一份, 但有时候,我们接口的 baseUrl,超时时间,请求方式的可能不一样,这样我们就可以分别创建多个不同的实例对象,将默认配置请求相同的归纳到一起。
- 配置的优先顺序: 所有的配置会以一个优先顺序进行合并,这个顺序是:在 lib/defaults.js 找到的库的默认值，然后是实例的 defaults 属性，最后是请求的 config 参数。后者将优先于前者
// 使用由库提供的配置的默认值来创建实例
// 此时超时配置的默认值是 '0'
var instance = axios.create();
// 覆写库的超时默认值
// 现在,在超时前,所有请求都会等待 2.5 秒
instance.defaults.timeout = 2500;
// 为已知需要花费很长时间的请求覆写超时设置
instance.get('/longRequest',{
timeout:5000
})
拦截器
- axios 拦截器分为两种, 一种是请求拦截器,一种是响应拦截器
- 设置后,在请求或响应被 then 或catch 处理前拦截它们
- 我们需要在请求发出前设置好拦截器
请求拦截器
- 使用axios.interceptors.request.use设置请求拦截器
- 请求拦截器可以设置多个
axios.interceptors.request.use(function (config) {
// 这个 config 就是我们发送请求配置的对象
// 在这里我们可以修改 config 中的参数
config.params = {a:100};
return config;
}, function (error) {
return Promise.reject(error);
});
axios.interceptors.request.use(function (config) {
config.timeout = 2000;
return config;
}, function (error) {
return Promise.reject(error);
});
上面我们给请求设置了两个请求拦截器,它们是怎么调用的呢?
这里先调用的是后设置的请求拦截器,然后再调用先设置的请求拦截器
- 同样也可以是自定义的axios 对象添加拦截器
const instance = axios.create();
instance.interceptors.request.use(function(){...})</pre>
* 可以使用 axios.interceptors.request.eject 来移除拦截器
<pre>const myInterceptor = axios.interceptors.request.use(function(){...})
axios.interceptors.request.eject(myInterceptor);
响应拦截器
- 使用axios.interceptors.response.use设置响应拦截器
- 响应拦截器同样可以设置多个
- 同样也可以给自定义axios 对象添加拦截器
- 可以使用axios.interceptors. response.eject 来移除拦截器
axios.interceptors.response.use(function (response) {
// 这里的 response,就是接口响应的数据,包括响应行,响应头,响应体等,
// 如果只需要响应体,可以直接返回 response.data
return response.data;
// return response;
}, function (error) {
return Promise.reject(error);
});
axios.interceptors.response.use(function (response) {
return response;
}, function (error) {
return Promise.reject(error);
});
上面我们也设置了两个响应拦截器,其调用顺序又是怎么样的呢?
这里先调用的是先设置的响应拦截器,后调用后设置的响应拦截器
取消请求
- 请求配置对象的 cancelToken 属性可以实现取消请求的功能, 每次请求执行时,会将取消请求的函数传给 cancelToken 的回调,执行这个取消函数,就可以将请求取消
//2.声明全局变量
let cancel = null;
//发送请求
function(){
//检测上一次的请求是否已经完成
if(cancel !== null){
//取消上一次的请求, 例如刷新
cancel();
}
axios({
method: 'GET',
url: 'http://localhost:3000/abc',
//1\. 添加配置对象的属性
cancelToken: new axios.CancelToken(function(c){
//3\. 将 c 的值赋值给 cancel
cancel = c;
})
}).then(response => {
console.log(response);
//将 cancel 的值初始化
cancel = null;
})
}
网友评论