axios 封装步骤 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)
        })
      })
    }
  }
})()

另一种写法

import axios from "axios";

var service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
});

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

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

总结:

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

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