Vue axios api封装

标签：axios iplas

---

axios

基于promise用于浏览器和node.js的http客户端

特点:

• 支持浏览器和node.js
• 支持promise
• 能拦截请求和响应
• 能转换请求和响应数据
• 自动转换JSON数据
• 浏览器端支持防止CSRF(跨站请求伪造)

安装

1、npm安装

$ npm install axios

2、bower安装

$ bower install axios

3、通过cdn引入

Easy Demo

#Get request
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

#Post request
axios.post('/save', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

多请求demo

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // Both requests are now complete
  }));

axios api

可以通过导入相关配置发起请求

1、axios(config)

// 获取远程图片
axios({
  method:'get',
  url:'http://bit.ly/2mTM3nY',
  responseType:'stream'
})
  .then(function(response) {
  response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});

2、axios(url[, config])

// 发起一个GET请求（GET是默认的请求方法）
axios('/user/12345');

3、可用的api别名

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
#注：当使用以上别名方法时，url，method和data等属性不用在config重复声明。

拦截器语法

/ 添加一个请求拦截器
axios.interceptors.request.use(function (response) {
    // Do something before request is sent
    return response;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

拦截器demo，添加响应拦截器，统一处理服务器响应和异常

      /**
       * 添加响应拦截器，统一处理服务器响应和异常
       */
      axios.interceptors.response.use(
        response => {
          return response
        },
        error => {
          /**
           * 状态码401代表无权限访问，权限失效，需要重新获取authToken
           * 状态码500代表REST服务器异常
           */
          const status = error.response.status
          const message = error.response.data.meta.message
          if (status === 401) {
            /**
             * 登录授权token超时，提示
             */
            if (message.indexOf('ERROR_CODE_001') > -1) {
              this.$message.error(errorCode.ERROR_CODE_001)
            }

            window.location.href = `${window.location.origin}/login`
            return Promise.reject(error)
          }

          /**
           * 1.处理系统服务异常
           * 2.处理SoaException异常
           */
          if (status === 500) {
            if (message.indexOf('ERROR_CODE_003') > -1) {
              this.$message.error(errorCode.ERROR_CODE_003)
              return
            }

            this.$message.error(message)
          }

          return Promise.reject(error)
        }
      )

封装axios api http.js，便捷方法调用

/**
* http.js
* 封装axios，
* 调用方法:
* http.get('/api/enquiry/web/query',{id:1}).then((res)=>{你的操作})
* http.post('/api/enquiry/web/update',{id:1}).then((res)=>{你的操作})
* http.postFormData('/api/enquiry/web/update',{id:1,file:file}).then((res)=>{你的操作})
*/
import axios from 'axios'

export default {
 /**
  * get方法，对应get请求
  * @param {String} url [请求的url地址]
  * @param {Object} params [请求时携带的参数]
  */
 get (url, params) {
   return new Promise((resolve, reject) => {
     axios.get(url, {
       params: params
     }).then(res => {
       resolve(res.data)
     }).catch(err => {
       reject(err)
     })
   })
 },
 /**
  * post方法，对应post请求
  * @param {String} url [请求的url地址]
  * @param {Object} params [请求时携带的参数]
  */
 post (url, params) {
   return new Promise((resolve, reject) => {
     axios.post(url, params)
       .then(res => {
         resolve(res.data)
       })
       .catch(err => {
         reject(err)
       })
   })
 },
 /**
  * postFormData方法，对应post请求，用来提交文件+数据
  * @param {String} url [请求的url地址]
  * @param {Object} params [请求时携带的参数]
  */
 postFormData (url, params) {
   return new Promise((resolve, reject) => {
     axios({
       headers: {
         'Content-Type': 'multipart/form-data'// ;boundary=----WebKitFormBoundaryQ6d2Qh69dv9wad2u
       },
       transformRequest: [function (data) { // 在请求之前对data传参进行格式转换
         const formData = new FormData()
         Object.keys(data).forEach(key => {
           formData.append(key, data[key])
         })
         return formData
       }],
       url,
       method: 'post',
       data: params
     }).then(res => {
       resolve(res.data)
     }).catch(err => {
       reject(err)
     })
   })
 }
}