易扩展,易复用,封装axios

axios介绍:

axios是近几年比较火的一个前端库,完美代替了jquery中的ajax,它不仅可以运行在浏览器也可以运行在nodejs环境下,而且支持Promise API 可以拦截请求,和返回.而且天生防XSRF

 

为什么需要封装:

有时候我们需要对服务端的状态统一处理,假如服务端返回状态码为300 我们需要重定向到登录页,这时我们就可以封装一下axios的api 使其统一处理我们的300状态码, 简单来说封装是为了让程序更加简洁,易于修改.减少重复性工作.

 

封装的好处及目的:

可以统一处理错误

可以统一处理状态码

使其调用更加简单

可以更加符合项目需要

封装的准备工作,重点,难点:

需要和后台开发人员约定状态码

需要确定项目的请求过期时间

回话保存机制,session,cookie token

需要哪些请求方式

需要什么格式,json, formdata,或url拼接参数

这里需要注意一下axios的一些api的参数 

当method为get时 参数是params

当method为post时 参数是data

withCredentials 参数为true是支持跨域验证

另外可以取消一个已经发起的xhr请求

另外当封装axios时,我们可能要引入其他的第三方库,比如弹窗插件,vuex,还有router的跳转.

完整代码:

放一个我们项目中用的axios封装

import router from '../router'
import axios from 'axios'

import config from './config'

// axios默认配置请求的api基础地址
axios.defaults.baseURL = (process.env.NODE_ENV !== 'production' ? config.dev.httpUrl : config.build.httpUrl)
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
axios.defaults.timeout = 30000 // 超时设置30s
export default ((url = '', data = {}) => {
  return {
    get (url, data) {
      return new Promise((resolve, reject) => {
        axios.get(url, {
          withCredentials: false,
          params: data
        }).then(function (response) {
          if (response.data.status === 1101) {
            router.push({path: '/login'})
          } else if (response.data.status === 200) {
            resolve(response.data)
          } else {
            resolve(response.data)
          }
        }).catch(function (error) {
          reject(error)
        })
      })
    },
    post (url, data) {
      return new Promise((resolve, reject) => {
        axios.post(url, data, {
          withCredentials: false
          // headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}
        }).then(function (response) {
          if (response.data.status === 1101) {
            router.push({path: '/login'})
          } else if (response.data.status === 200) {
            resolve(response.data)
          } else {
            resolve(response.data)
          }
        }).catch(function (error) {
          reject(error)
        })
      })
    }
  }
})()

总结:

网上很多库,大多都是可以拿来就可以用的,但高手绝不仅仅满足用,而是要对其进行改造,使其适应自己的项目.从而达到提高开发效率.简单易用的效果.

谢谢阅读.如果觉得对你有帮助请记得点赞或收藏.欢迎留言讨论.你的支持是我出产优秀博客的动力.