vue - axios封装

1.安装axios

npm i axios

环境配置.png
.env.development.png
.env.production.png
.env.test.png
package.json.png

2.新建一个axios.js文件，对axios进行封装

import axios from 'axios'
import QS from 'qs' // 引入qs模块，用来序列化post类型的数据
import jsonBig from 'json-bigint' // 解决后端返回大数字问题（控制台中preview和response值不同）
import store from '@/store/index' // 导入vuex，因为我们要使用到里面的状态对象
import { Message, Loading } from 'element-ui'; 

// 请求加载
let loading:any
let needLoadingRequestCount = 0
function showLoading () {
    if(needLoadingRequestCount === 0) {
        loading = Loading.service({
            lock: true,
            text: '加载中...',
            background: 'rgba(0,0,0,0.2)'
        })
    }
}
function hideLoading () {    
    if(needLoadingRequestCount <= 0) return
    needLoadingRequestCount--
    if(needLoadingRequestCount === 0) {
        loading.close()
    }
}

// axios基本配置信息：baseURL、设置请求超时、请求头设置
const instance = axios.create({
  baseURL: process.env.VUE_APP_DATA_URL,
  timeout: 10000,  // 若为0表示无超时时间
  headers: {
      'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
  },
  // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
  transformResponse: [function (data) {
        try {
            // 如果转换成功则返回转换的数据结果
            return jsonBig.parse(data)
        } catch (err) {
            // 如果转换失败，则包装为统一数据格式并返回
            return {
                data
            }
        }
    }]
})

// 携带当前页面路径跳转登录页，登录完成后返回当前页面
const toLogin = () => {
    router.replace({
        path:'/login',
        query:{
            redirect:router.currentRoute.fullPath
        }
    })
}

// 提示函数
const tip = msg => {
    Message({
        icon: 'warning',
        message:msg
    })
}

// 请求拦截
instance.interceptors.request.use(
    config => {
        /*
            每次发送请求之前判断vuex中是否存在token
            若存在，统一在http请求的header上都加上token，后台根据token判断你的登录情况
            即使本地存在token也有可能是过期的
            所以在响应拦截器中对返回状态进行判断
            token
                一般登录完成，将用户的token通过localstorage或cookie存在本地
                用户在每次进入页面的时候，先从本地存储中读取token
                若token存在则说明用户已经登录过，更新vuex中的token状态
                每次请求接口的时候，请求头中携带token，后台判断携带的token是否过期
                若未携带，则说明没有登录过
        */
        showLoading()
        const token = store.state.token
        token && (config.headers.Authorization = token)
        return config
    },
    error => {
        hideLoading()
        return Promise.error(error)
    }
)

// 响应拦截:服务器返回给我们的数据，进行统一的处理
instance.interceptors.response.use(
    response => {
        hideLoading()
        if(response.status === 200){
            return Promise.resolve(response)
        } else {
            return Promise.reject(response)
        }
    },
    /*
        以下是服务器状态码不是2开头的情况，和后台人员协商好统一的错误状态码
    */
    error => {
        hideLoading()
        if (error.response.status) {
            switch (error.response.status){
                // 401未登录，携带当前页面路径跳转至登录页面，登录成功跳转至当前页
                case 401:
                    toLogin()
                    break;         
                // 403 token过期，对用户进行过期提示，清除本地token和vuex的token对象，跳转至登录页
                case 403:
                    tip('登录过期，请重新登录')
                    localStorage.removeItem('token');
                    store.commit('loginSuccess', null);
                    setTimeout(() => {                        
                        toLogin()                   
                    }, 1000);                    
                    break; 
                // 404请求不存在
                case 404:
                    tip('网络请求不存在')
                    break;
                // 其他错误，直接抛出错误提示
                default:
                    tip(error.response.data.message)
            }
            return Promise.reject(error.response)
        }
    }    
)

// get方法的封装(url-请求的地址，params-请求的参数)
export function get(url,params){
    return new Promise((resolve,reject)=>{
        instance.get(url,{
            params:params
        }).then(res => {
            resolve(res.data)
        }).catch(err => {
            reject(err.data)
        })
    })
}

// post方法的封装(url-请求的地址，params-请求的参数)
export function post(url,params){
    return new Promise((resolve,reject)=>{
        instance.post(url,QS.stringify(params)).then(res => {
            resolve(res.data)
        }).catch(err => {
            reject(err.data)
        })
    })
}

3.api.js(api的统一管理，模块化)

// address.js
import { get, post } from './axios.js'
const address = {
    // 如一个post请求的接口，url: http://www.baiodu.com/api/v1/users/my_address/address_edit_before
    apiAddress(p){
        return post('api/v1/users/my_address/address_edit_before', p)
    },
    apiAddressDetail(p){
        return post('api/v1/users/my_address/address_detail', p)
    }
}
export default address



// index.js
import address from 'api/address.js'
import article from 'api/article.js'
...// 其它模块的接口

export default {
    address,
    article
}



// main.js
import Vue from 'vue'
import App from './App'
import router from './router' // 导入路由文件
import store from './store' // 导入vuex文件
import api from './api/index' // 导入api接口

Vue.prototype.$api = api    // api挂载到vue原型上

4.封装好的接口调用

export default{
    name:'',
    created(){
        this.onLoad()    
    },
    methods:{
        onLoad(){
            this.$api.address.apiAddress({
                type:0,sort:1
            }).then(
                res=>{
                    // 获取数据成功的其它操作
                }
            )
        }
    }
}