Vue中基于Axios的封装及使用

问题/需求描述:

• 在项目开发过程中, 如果每一次调用网络请求都去写一次请求的配置参数, 例如: header中的属性(比如需要携带token、cookie等身份识别信息, 或者传递参数的格式content-type, 就比较麻烦. 所以,这里就在axios上对需要固定配置或者不经常改动的信息进行一下初始化.

初步实现

• 首先导入axios包, 使用npm命令: npm i axios -S
• 然后在项目中导入: import axios from ‘axios’, 这里使用的是ESM导入方式.
• 然后就是针对axios可配置项参数进行配置了.

// 1. 导入
import Axios from 'axios';


// 暴露一下自己封住后的方法
export default function request(option) {
    // 导出Promise用来处理异步, 相对于传统的callback更加方便, 还可以使用async、awati简化
    return new Promise((resolve, reject) => {
        // 1.创建axios的实例
        const instance = Axios.create({
            // 项目中使用到的后端接口的通用url部分
            baseURL: 'http://xxxxxxxxxxxxxxx/',
            // 最大请求时长
            timeout: 10000
        });

        // 配置请求和响应拦截
        instance.interceptors.request.use(config => {
            // console.log('来到了request拦截success中');
            // 1.当发送网络请求时, 在页面中添加一个loading组件, 作为动画

            // 2.某些请求要求用户必须登录, 判断用户是否有token, 如果没有token跳转到login页面

            // 3.对请求的参数进行序列化(看服务器是否需要序列化)
            // config.data = qs.stringify(config.data)
            // console.log(config);

            // 4.等等
            return config
        }, err => {
            // console.log('来到了request拦截failure中');
            return err
        })

        instance.interceptors.response.use(response => {
            // console.log('来到了response拦截success中');
            return response.data
        }, err => {
            console.log('来到了response拦截failure中');
            // 能够根据错误参数code返回失败信息
            if (err && err.response) {
                switch (err.response.status) {
                    case 400:
                        err.message = '请求错误'
                        break
                    case 401:
                        err.message = '未授权的访问'
                        break
                    default:
                        err.message = "其他错误信息"
                }
            }
            return err
        })

        // 2.传入对象进行网络请求
        instance(option).then(res => {
            resolve(res)
        }).catch(err => {
            reject(err)
        })
    })
}