axios介绍
axios 是一个基于Promise的HTTP库，可以在浏览器和NodeJS中使用
特征
- 在客户端创建
XMLHTTPRequest - 在服务器创建
HTTP - 能拦截请求和响应
- 处理请求和响应数据
- 取消请求
- 自动转化成JSON数据
- 客户端支持防御
XSRF
浏览器支持
- IE9及以上
使用axios示例
get
// get 请求的两种方式
axios.get('/users?id=123')
.then(function (response) {
// 响应成功
})
.catch(function (err) {
// 响应失败
})
axios.get('/users',{
params: {
id: 1234
}
})
.then()
.catch()
post
axios.post('/users',{
firstName: 'y',
lastName: 'f'
})
.then()
.catch()
concurrent requests
function getUsersName () {
return axios.get('/users/name')
}
function getUsersCount() {
return axios.get('/users/count')
}
axios.all([getUsersName(),getUsersCount()])
.then(axios.spread(function (nameRes, countRes) {
}))
axios API
axios 通过配置发送请求
// post请求设置
axios({
method: 'post',
url: '/user/1234',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
})
// 默认是get请求
axios('/users/1234')
http 各种请求方式
| 方法 | 描述 |
|---|---|
| get | 请求制定的页面信息，并返回实体主体 |
| delete | 请求服务器删除制定页面 |
| head | 类似get请求，但没有实体主体，只有报头 |
| options | 允许客户端查看服务器的性能 |
| post | 向制定资源提交数据进行处理请求 |
| put | 从客户端向服务器传送的数据取代制定的文档内容 |
| patch | 实体中包含一个表，表中说明与该URL所表示的原内容的区别 |
axios 请求方法
axios.request(config)-
axios.get(url,[config])，get请求方式没有第二个参数data，它的请求数据是以params的形式发送 axios.delete(url,[config])axios.head(url,[config])axios.options(url,[config])axios.post(url,[data],[config])axios.put(url,[data],[config])axios.patch(url,[data],[config])
小知识点
- url,method,data不需要特别配置
创建实例
实例可以使用的方法和axios可以使用的方法相同
var instance = axios.create({
// 进行配置
});
config
以下是可以进行配置的选项
{
url: '/user',
method: 'get',
baseURL: 'https://some-domain.com/api/',
// 在发送请求之前对请求做一些处理，对应的是一个函数数组
transformRequest: [function (data) {
// 可以对data做一些处理
return data;
}],
// 允许我们在数据传送到`then`/`catch`之前对数据进行改动
transformResponse: [ function (data) {
// 可以对data做一些处理
return data;
}],
// 需要被发送的自定义请求头信息
headers: {'X-Requested-With':'XMLHttpRequest'},
// 请求参数
params: {
id: 123
},
paramsSerializer: function (params) {
// 让参数序列化
return Qs.stringigy(params,{arrayFormat:'brackets'})
},
// 只适用于 post put patch
data: {
first: 'yf'
},
// 请求超过延迟事件，请求就会停止
timeout: 1000,
// 是否是跨域请求
withCredentials: false,
// 允许自定义处理请求
adapter: function (config) {
},
// http基础的认证应该被使用，并提供证书，会设置 `Authorization`头信息
auth: {
username: 'zhangsan',
password: '123'
},
// 返回的数据类型
responseType: 'json',
// 默认
xsrfCookieName: 'XSRF-TOKEN',
xsrfHeaderName: 'X-XSRF-TOKEN',
// 上传进度事件
onUploadProgress: function (progressEvent) {
},
// 下载进度事件
onDownloadProgress: function (progressEvent) {
},
// 响应内容的最大值
maxContentLength: 2000,
// 定义了是否根据 http 相应的状态码。来resolve 或者 reject promise
validateStatus: function (status) {
return status > 200 && status < 300;
},
// 允许重定向的最大数
maxRedirects: 5,
// 自定义代理，http / https 代理
httpAgent: new http.Agent({keeyAlive:true}),
httpsAgent: new https.Agent({keeyAlive:true}),
// 代理认证，并提供证书
proxy: {
host: '127.0.0.1',
port: 9000,
auth: {
username: 'sk',
password: 'work hard'
}
},
// 定义了一个用于取消请求的 cancel token
cancelToken: new CancelToken(function (cancel) {});
}
response data
{
data: {},
statue: 200,
statueText: 'OK',
headers: {},
config: {}
}
默认配置
全局默认配置
对所有请求都有效
axios.defaults.baseURL = 'http:/api'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
自定义的实例默认配置
var instance = axios.create({
baseURL: 'https://api.example.com'
});
配置中的优先级
一个实例中的配置的优先级
- 请求中的config参数配置，等级最高
- 实例中的默认配置，等级次之
-
lib/defauts.js配置最低
// 创建一个实例的配置
var instance = axios.create({
// 实例默认配置
baseURL: 'https://api.example.com'
});
// 在实例已创建后修改默认值
instance.defaults.timeout = 2500;
// 请求中的配置
instance.get('/users',{
timeout: 3000
});
拦截器
在到达then/catch之前拦截
// 对请求添加拦截器
axios.interceptor.request.use(function (config) {
// 请求前做些什么
return config
},function (err) {
// 对象请求错误做些什么
return Promise.reject(err)
});
// 对响应添加响应器
axios.interceptor.response.use(function (res) {
// 对相应数据做些什么
return res;
},function (err) {
// 对象请求错误做些什么
return Promise.reject(err);
};
移除拦截器
var myInterceptor = axios.interceptor.request.use(function () {});
axios.interceptors.request.eject(myInterceptor);
给自定义的axios实例添加拦截器
var instance = axios.create();
instance.interceptors.request.use(function(){})
错误处理
axios.get('/users')
.then()
.catch(function (err) {
if (err.response) {
// 请求已将发出，但是服务器的响应码不在2XX范围内
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
}else if (err.request) {
// 有请求，但是没有响应
// err.request 是 xhr 或者 clientRequest
}else {
// 请求发送错误
console.log('Error',error.message)
}
// 无论那种错误，都打印出config信息
console.log(error.config);
})
取消
通过两种方式来取消请求
// 第一种方式
var cancelToken = axios.CancelToken;
var cancel;
axios.get('/user/1234',{
cancelToken: new CancelToken(function (c) {
cancel = c;
});
})
// 取消请求
cancel();
// 第二种方式
var CancelToken = axios.CancelToken;
var source = CancelToken.source();
axios.get('/user/12345', {
cancelToken: source.token
}).catch(function(thrown) {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else {
// handle error
}
});
source.cancel('Operation canceled by the user.');
