• 欢迎大家分享资料!前往留言板评论即可!

axios的高阶用法

合宙 模组资料网 5个月前 (05-15) 70次浏览 已收录 0个评论 扫描二维码

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


转载请注明原文链接:axios的高阶用法
喜欢 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址