axios是一个类似ajax的异步请求组件,github地址如下
https://github.com/axios/axios
下面将介绍axios如何上手使用
发送请求
1.get 请求
axios.get(vue.baseurl + 'code/list')
.then(function (response) {
if (response.data.Code == 0) {
parent.vue.saveSuccess();
}
})
.catch(function (error) {
console.log(error);
});
上面的代码将发送一个异步get请求到vue.baseurl + 'code/list'地址,如果成功则响应的值为then方法中的response,如果请求出错则进入catch处理错误
2. post请求
axios.post(vue.baseurl + 'code/add', {
"CodeNumber": vue.codeNumber,
"ActivationCode": vue.activationCode
})
.then(function (response) {
if (response.data.Code == 0) {
parent.vue.saveSuccess();
}
})
.catch(function (error) {
console.log(error);
});
上面的代码将发送一个异步post请求到vue.baseurl + 'code/add'地址,地址后面为传入的参数,如果成功则响应的值为then方法中的response,如果请求出错则进入catch处理错误
3. put请求
axios.put(vue.baseurl + 'home/PutMethod',
{
"id":"put123"
})
.then(function (response) {
vue.result = response.data.msg;
})
.catch(function (error) {
console.log(error);
});
4.delete 请求
axios.delete(vue.baseurl + 'home/DeleteMethod?id=del123')
.then(function (response) {
vue.result = response.data.msg;
})
.catch(function (error) {
console.log(error);
});
5.header 请求
请求配置
axios发起请求时可以对下面项进行配置
- url:请求地址
- method:请求方法
- baseURL:基本路径
- transformRequest
- transformResponse
- headers:请求头
- params:请求参数
- paramsSerializer
- data:post,put,path请求的请求体内的参数
- timeout:超时时间
- withCredentials
- adapter
- auth
- responseType:响应消息的类型
- responseEncoding:响应的编码格式
- xsrfCookieName
- xsrfHeaderName
- onUploadProgress
- onDownloadProgress
- maxContentLength:响应消息的长度
- validateStatus
- maxRedirects
- socketPath
- httpAgent
- httpsAgent
- proxy
- cancelToken:取消请求的令牌
axios响应的消息体:
{
// 包含服务器返回的消息
data: {},
// 响应状态
status: 200,
// 响应状态描述
statusText: 'OK',
//响应的消息头
headers: {},
// `config` is the config that was provided to `axios` for the request
config: {},
// `request` is the request that generated this response
// It is the last ClientRequest instance in node.js (in redirects)
// and an XMLHttpRequest instance the browser
request: {}
}
配置axios的全局配置项
使用axios.defaults对全局的配置项赋值
axios.defaults.baseURL = '@Url.Content("~/home")';
axios.defaults.timeout = '1000';
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
上面配置了baseURL以后,下面请求的url就可以去掉请求前面相同的路径
axios.get('GetMethod?id=get123')
.then(function (response) {
vue.result = response.data.msg;
})
.catch(function (error) {
console.log(error);
});
对局部配置项进行配置
const instance = axios.create();
instance.defaults.baseURL = '@Url.Content("~/home")';
instance.defaults.timeout = '1000';
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
通过axios.create创建请求的实例,当发起请求是只需要将axios替换成上面创建的实例
instance.get('GetMethod?id=get123')
.then(function (response) {
vue.result = response.data.msg;
})
.catch(function (error) {
console.log(error);
});
拦截器
错误处理
取消请求