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

});

 

拦截器

 

错误处理

 

取消请求