基于vue axios element-ui 的 demo

什么是axios?

       axios是一个基于Promise的HTTP库,能在浏览器和NodeJS中使用。

 

axios特性?

 

  1. 从浏览器中创建 XMLHttpRequests
  2. 从 node.js 创建 http 请求
  3. 支持 Promise API
  4. 拦截请求和响应
  5. 转换请求数据和响应数据
  6. 取消请求
  7. 自动转换 JSON 数据
  8. 客户端支持防御 XSRF

 

以上来自@ https://www.kancloud.cn/yunye/axios/234845

 

咱们看一下哈,首先基础的,请求肯定是有的,但是除了请求,多了Promise,多了拦截,多了对请求和响应数据的处理。

 

请求?

       我这里以axios(config)为例子

       其中config可以包括以下内容(来自@ https://www.kancloud.cn/yunye/axios/234845

      

{
  url: '/user',

  method: 'get',

  baseURL: 'https://some-domain.com/api/',

  transformRequest: [function (data) {

    return data;

  }],



  transformResponse: [function (data) {

    return data;

  }],

  headers: {'X-Requested-With': 'XMLHttpRequest'},

  params: {

    ID: 12345

  },

  paramsSerializer: function(params) {

    return Qs.stringify(params, {arrayFormat: 'brackets'})

  },

  data: {

    firstName: 'Fred'

  },

  timeout: 1000,

  withCredentials: false,

  adapter: function (config) {  },

  auth: {

    username: 'janedoe',

    password: 's00pers3cret'

  },

  responseType: 'json',

  xsrfCookieName: 'XSRF-TOKEN',

  xsrfHeaderName: 'X-XSRF-TOKEN',

  onUploadProgress: function (progressEvent) {  },

  onDownloadProgress: function (progressEvent) {  },

  maxContentLength: 2000,

  validateStatus: function (status) {

    return status >= 200 && status < 300;

  },

  maxRedirects: 5,

  httpAgent: new http.Agent({ keepAlive: true }),

  httpsAgent: new https.Agent({ keepAlive: true }),

  proxy: {

    host: '127.0.0.1',

    port: 9000,

    auth: : {

      username: 'mikeymike',

      password: 'rapunz3l'

    }

  },

  cancelToken: new CancelToken(function (cancel) {

  })

}

 

有点多哈,咱们先来看看最简单的;以上config中,url是必须的,也就是说最简单的一个axios请求就是:axios( ‘url’ ); 默认的请求方法是get

 

axios 全局请求配置?

axios通过 axios.defaults.* 来配置全局的axios config

比如,你想要配置全局的默认请求时间和请求头:

axios.defaults.timeout = 5000;

axios.defaults.headers.* = *;

 

config实例里的属性会覆盖掉defaults的默认配置

 

axios请求拦截?

       在请求或响应被 then 或 catch 处理前拦截它们。

       也就是说,拦截器就是处理中间的HTTP的陈咬金。

 

// 添加请求拦截器
axios.interceptors.request.use(function(config){
// 在发送请求之前做些什么    
return config; 
},
 
function(error){    
// 对请求错误做些什么    
return Promise.reject(error);  
});

// 添加响应拦截器
axios.interceptors.response.use(function(response){    
// 对响应数据做点什么    
return response;  
},
 function(error) {    
// 对响应错误做点什么    
return Promise.reject(error);  
});

     

实际操作?

       这里我用 element-ui 和 axios 来做一个 demo

       github代码地址:

https://github.com/JJ0Huang/vueDemo.git

 

 

 

 

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值