axios的高阶用法

axios的高阶用法

介绍

Axios 是一个基于 promise 的 HTTP 库，可以在浏览器和 node.js 中使用。目前在我们的项目中主要使用axios向服务端发送请求，获取数据，并且可在请求中做很多的可控操作。更多详情可参考axios官方文档

常见使用

import axios from 'axios'
login(){
    axios.post("/info/api/user/loginin",{
        username:"admin",
        password:123
    }).then(res=>{
        console.log(res)
    })
}

以上是一个简单的使用axios的实现登录功能的实例。

抽离

从功能层面来说，这段代码可以完美完成任务，但是为了代码的可维护性和简便性，我们可以对axios相关的代码做进一步抽离。按照之前的编码习惯（小伙伴们也可以自行制定规范），我通常会在项目的src文件夹下新建api文件夹，并新建axios.js文件。

以下为在axios.js文件下的操作：

import Axios from 'axios'
import store from '@/store/index'
import Router from '@/router/index'

import { Message } from 'element-ui'
let http={}

const baseUrl = process.env.NODE_ENV === 'production' ? 'https://yoururl.com/' : '/api'
var instance = Axios.create({
    timeout: 20000,
    baseUrl,
    validateStatus(status){
        switch(status){
            case 400:
                Message.error('请求出错')
                break
            case 401:
                Message.warning({
                    message: '授权失败，请重新登录'
                })
                // store.commit('LOGIN_OUT')
                setTimeout(() => {
                    Router.push({
                        name: 'Login',
                        path: '/'
                    })
                }, 1000)
                store.dispatch('LOGIN_PAGE',false);
                return;
            case 403:
                Message.warning({
                    message: '拒绝访问'
                })
                break
            case 404:
                Message.warning({
                    message: '请求错误,未找到该资源'
                })
                break
            case 500:
                Message.warning({
                    message: '服务端错误'
                })
                break
        }
        return status >= 200 && status < 300
    }
})

// 添加请求拦截器
instance.interceptors.request.use(
    function(config){
        // 请求头添加token
        if(store.state.userToken) {
            store.dispatch('LOGIN_PAGE', true)
            config.headers.Authorization = `{store.state.userToken}`;
            config.headers['SHTC-TOKEN'] = `{store.state.userToken}`;
        }
        return config
    },
    function(error) {
        return Promise.reject(error)
    }
)

// 响应拦截器及异常处理
instance.interceptors.response.use(
    response => {
        return response.data
    },
    err => {
        if(err && err.response) {
            console.log(err)
        }else {
            err.Message = '连接服务器失败'
        }
        return Promise.reject(err.response)
    }
)

// get请求
http.get = function(url, options) {
    return new Promise((resolve, reject) => {
        instance
            .get(baseUrl + url, options)
            .then(response => {
                if(response.code === 200) {
                    resolve(response.data)
                }else {
                    Message.error({
                        message: response.errorMsg
                    })
                    reject(response.errorMsg)
                }
            })
            .catch(e => {
                console.log(e)
            })
    })
}

// post请求
http.post = function(url, data, options) {
    return new Promise((resolve, reject) => {
        instance
            .post(baseUrl + url, data, options)
            .then(response => {

                // store.mutations('LOGIN_PAGE',true);
                if(response.code === 200) {
                    store.dispatch('LOGIN_PAGE',false);
                    // store.mutations('LOGIN_PAGE', false)
                    resolve(response.data);
                }else {
                    Message.error({
                        message: response.errorMsg
                    })
                    store.dispatch('LOGIN_PAGE', false)
                    reject(response.errorMsg)
                }
            })
            .catch(e => {
                store.dispatch('LOGIN_PAGE',false);
                console.log(e)
            })
    })
}

// todo
// put | patch | delete ...

export default http

• 首先我们在该文件中引入axios并实例化一个对象，可额外添加一些配置（超时时间、公共url、常见状态验证等等）；
• 如果我们使用JWT式的请求交互方式的话，可以在请求拦截器上将token挂在上去；
• 为了安全简便的使用返回数据，我们可以在响应拦截器上验证返回字段并将其中的data剥离后直接返回；
• 新创建一个对象http，并将axios实例支持的请求方式按编写习惯封装为函数并挂载到http上
• 导出http对象

上述代码处于vue环境中，在react中使用时，部分代码须替换

抽离后的使用

在上述axios.js完成后，api文件夹下的剩余文件可按业务模块划分，这里以用户登录为例，在api下新建user.js，创建并暴露login函数

import http from './index'

// 用户登录
export function login(data){
    return http.post('/user/login',data);
}

在页面组件上导入使用即可。

总结

axios在前端业务上的使用广泛，合理的封装抽离可以使我们的开发事半功倍，同时也能提高项目结构的合理性。以上即为全部内容，如有出入，欢迎指正。