axios使用

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);

});

 

拦截器

 

错误处理

 

取消请求

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值