axios二次封装简易版

ChFeng
449 阅读2分钟

axios的官方文档对它是这么介绍的

  • 从浏览器中创建XMLHttpRequest
  • 从node发出http请求
  • 支持Promsie API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 自动转换JSON数据
  • 客户端支持防止CSRF/XSRF

安装axios,qs

npm install axios qs  // qs模块，用来序列化post类型的数据

引入

import axios from 'axios'
import qs from 'qs'

process.env.NODE_ENV

  • 一般开发中会有开发环境（development），生产环境（production），测试环境（暂名为test）
  • 可以通过process.env.NODE_ENV来判断当前环境
    • process对象是全局变量，它提供当前node.js的有关信息，以及控制当前node.js的有关进程，对于node应用程序是始终可用的，无需require
    • env自然是它的一个属性，这个属性返回包含用户环境信息的对象
    • NODE_ENV不是process.env对象上原有的属性,是我们自己添加上去的一个环境变量,用来确定当前所处的开发阶段。一般生产阶段设为production，开发阶段设为develop
  • 在终端输入node后，在输入process.env可以看到打印出来的信息

根据环境变量区分接口的默认地址

switch (process.env.NODE_ENV) {
    case "production":
        axios.defaults.baseURL = "http://api.production.com"
        break
    case "test":
        axios.defaults.baseURL = "http://192.168.20.12:8080"
        break
    default:
        axios.defaults.baseURL = "http://127.0.0.1:7000"
}

设置超时时间和跨域是否携带凭证

axios.defaults.timeout = 10000
axios.defaults.withCredentials = true

设置请求传递数据的格式（具体看服务器要求的格式）

axios.defaults.header['Content-Type'] = 'application/x-www-form-urlencoded'

处理post数据

axios.defaults.transformRequest = data => {
    qs.stringify(data)
}

设置请求拦截器

  • Token校验(例如JWT) 接收服务器返回的Token，存储到vux或本地存储中
  • 每一次向服务器发请求，应该把Token带上
axios.interceptors.request.use(
    config => {
        // 携带上Token，以Token存储在localStorage为例
        let token = localStorage.getItem('token')
        token && (config.headers.Authorization = token)
        return config
    },
    error => {
        return Promise.reject(error)
    })

自定义响应成功的HTTP状态码

axios.defaults.validataStatus = status => {
    return /^(2|3)\d{2}$/.test(status)
}

响应拦截器

axios.interceptors.response.use(
    response => {
        return response.data
    },
    error => {
        let { response } = error
        if (response) {
            // 服务器有返回结果
            switch (response.status) {
                case 401: // 当前请求用户需要验证（未登录）
                    // 此处进行相应处理
                    break
                case 403: // 服务器已经理解请求，但是拒绝执行（Token过期）
                    // 此处进行相应处理
                    break
                case 404: // 请求失败, 请求资源未在服务器中找到
                    // 此处进行相应处理
                    break
            }
        } else {
            // 服务器无返回结果
            if (!window.navigator.onLine) {
                // 断网处理
                return
            }
            return Promise.reject(error)
        }
    })

导出

export default axios
avatar
文章
阅读
粉丝