基于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