vue项目之axios的封装使用

最新推荐文章于 2024-07-03 08:00:00 发布
最新推荐文章于 2024-07-03 08:00:00 发布
阅读量293 收藏
点赞数
分类专栏： axios 文章标签： vue http
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42681295/article/details/113558472
版权

vue之axios的封装使用

注意：先在项目里面安装axios，以下注释的地方可以直接删除，不影响功能实现

新建文件 api 和 service和 config

在这里插入图片描述

1、service文件下新建如图文件

index.js

import axios from 'axios';

// import {Toast} from 'vant';
import qs from 'qs';
// import {getToken,getAgentId,removeToken} from '@/utils/util'
import config from '@/config'
import Vue from 'vue'
let $vue = new Vue

const URL = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
/**
 * 创建axios实例
 * @type {AxiosInstance}
 */
axios.defaults.timeout = 10000;
axios.defaults.baseURL = URL; //填写域名
/**
 * 请求参数处理
 */
axios.interceptors.request.use((config) => {
    // let user = JSON.parse(sessionStorage.getItem('user'));
        // const agentId = getAgentId();
        // if(config.data && agentId){
        //     config.data.agentId = agentId
        // }
        // if(config.params && agentId){
        //     config.params.agentId = agentId
        // }
        // console.log(config)
        if(config.isNeedToken){
            console.log("请求需要token")
        }
        config.method === 'post'
            ? config.data = qs.stringify({...config.data})
            : config.params = {...config.params}
        // const token = getToken()
        // if (token) {
        //     config.headers['Authorization'] = 'Bearer ' + token
        // } 
        // if(config.isNeedToken && !token){
        //     try {
        //         // 再次调用原生方法，获取token
        //         // u.native.getUserInfo()
        //         const token = getToken()
        //         config.headers['Authorization'] = 'Bearer ' + token
        //         console.log("再次调用原生方法获取token")
        //     } catch (error) {
        //         console.log("原生方法未注入", error);
        //     }
        // }

        // 用于测试的token值 login登录更新token
        // config.headers['Authorization'] = 'Bearer ' + "7816014465510072321f41238a-c847-4ff1-9381-e641bc2d5f16"  //188 测试
        // config.headers['Authorization'] = 'Bearer ' + "78116742149561958402382f7d-483f-4fc3-b934-e6fc9ee3ce4a"  //156
        // config.headers['Authorization'] = 'Bearer ' + "801756553907535872602001db-4c23-4949-8596-9daeda65bd40" //测试
        // config.headers['Authorization'] = 'Bearer ' + "803320347343454208a23f2d16-0cf4-4af4-bd02-f3ad6b24996e"
        // config.headers['Authorization'] = 'Bearer ' + "79849685364034764858d5eee5-1924-4f94-9bf9-e15e3d6f8b76"  //188 正式
        
        console.log("请求的token",config.headers['Authorization'])
        // if(config.isLoading){
        //     Toast.loading({
        //         message: '加载中...',
        //         forbidClick: true,
        //         overlay:false,
        //         duration:0
        //     });
        // }
        return config
    }
)


//响应拦截器即异常处理
axios.interceptors.response.use(
    (response) => {
        // Toast.clear();
        if (response.data.code === 0) {
            // 服务端定义的响应code码为0时请求成功
            // 使用Promise.resolve 正常响应
            return Promise.resolve(response.data)
        } else if(response.data.code == 5000){
            // 使用Promise.reject 响应
            // Toast({message: response.data.message, position: 'bottom', duration: 1000});
            return Promise.reject(response.data)
        }
    }, error => {
        let message = ''
        console.log("请求错误-------------",error);
        if (error && error.response) {
            switch (error.response.status) {
                case 401:
                    // location.reload()
                    if(error.response.data.code === 2012){
                        // Toast({message: '请重新登录', position: 'bottom', duration: 1000});
                        // 判断token是否失效 失效去登录
                        // removeToken()
                        // if($vue.$getUserAgent() == 0){
                        //     try{
                        //         u.native.toLogin() 
                        //     }catch (e) {
                        //         console.log("原生方法未注入", e)
                        //     }
                        // }else{
                        //     try{
                        //         window.webkit.messageHandlers.toLogin.postMessage({});
                        //     }catch (e) {
                        //         console.log("ios方法未注入", e)
                        //     }
                        // }
                    }
                    return
                case 403 || 400:
                    message = error.response.data.path + ',' + error.response.data.message
                    break
                 case 500:
                     message = '网络繁忙，请稍后再试'
                     break
                 case 502:
                     message = '连接服务器失败'
                     break
                default:
                    message = error.response.data.message ? error.response.data.message : '网络繁忙，请稍后再试'
                    break
            }
            // Toast({message: message, position: 'bottom', duration: 1000});
            // 请求错误处理
            return Promise.reject(error)
        } else {
            message = '网络繁忙，请稍后再试'
            // Toast({message: message, position: 'bottom', duration: 1000});
            return Promise.reject(error)
        }
    }
)

export default axios

postJson.js

import axios from 'axios';

// import {Toast} from 'vant';
// import {getToken,getAgentId,removeToken} from '@/utils/util'
import config from '@/config'
import Vue from 'vue'
let $vue  = new Vue

const URL = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro

/**
 * 创建axios实例
 * @type {AxiosInstance}
 */
const service = axios.create({
    baseURL: URL, // api的base_url
    timeout: 30000  // 设置请求超时时间30s
})

/**
 * 请求参数处理
 */
service.interceptors.request.use((config) => {
        // let user = JSON.parse(sessionStorage.getItem('user'));
        // const agentId = getAgentId();
        // if(config.data && agentId){
        //     config.data.agentId = agentId
        // }
        // if(config.params && agentId){
        //     config.params.agentId = agentId
        // }
        // if(user && user.shop && user.shop.agentId){
        //     if(config.data){
        //         config.data.agentId = user.shop.agentId
        //     }
        //     if(config.params){
        //         config.params.agentId = user.shop.agentId
        //     }
        // }
        config.method === 'post'
            ? config.data = {...config.data}
            : config.params = {...config.params}
        // const token = getToken()
        // if (token) {
        //     config.headers['Authorization'] = 'Bearer ' + token
        // }
        // if(config.isNeedToken && !token){
        //     try {
        //         console.log("再次获取token")
        //         // 再次调用原生方法，获取token
        //         // u.native.getUserInfo()
        //         const token = getToken()
        //         config.headers['Authorization'] = 'Bearer ' + token
        //     } catch (error) {
        //         console.log("原生方法未注入", error);
        //     }
        // }

        // 用于测试的token值 login登录更新token
        // config.headers['Authorization'] = 'Bearer ' + "7816014465510072321f41238a-c847-4ff1-9381-e641bc2d5f16" //188 测试
        // config.headers['Authorization'] = 'Bearer ' + "78116742149561958402382f7d-483f-4fc3-b934-e6fc9ee3ce4a" //156
        // config.headers['Authorization'] = 'Bearer ' + "801756553907535872602001db-4c23-4949-8596-9daeda65bd40"  //家
        // config.headers['Authorization'] = 'Bearer ' + "803320347343454208a23f2d16-0cf4-4af4-bd02-f3ad6b24996e"
        // config.headers['Authorization'] = 'Bearer ' + "79849685364034764858d5eee5-1924-4f94-9bf9-e15e3d6f8b76" //188 正式
        console.log("请求的token",config.headers['Authorization'])
        return config
    }
)


//响应拦截器即异常处理
service.interceptors.response.use(
    (response) => {
        if (response.data.code === 0) {
            // 服务端定义的响应code码为0时请求成功
            // 使用Promise.resolve 正常响应
            return Promise.resolve(response.data)
        } else {
            // 使用Promise.reject 响应
            // Toast({message: response.data.message, position: 'bottom', duration: 1000});
            return Promise.reject(response.data)
        }
    }, error => {
        let message = ''
        console.log(error)
        if(error && error.response){
            switch (error.response.status) {
                case 401:
                    if(error.response.data.code === 2012){
                        // Toast({message: '请重新登录', position: 'bottom', duration: 1000});
                        // 判断token是否失效
                        // removeToken()
                        // if($vue.$getUserAgent() == 0){
                        //     try{
                        //         u.native.toLogin() 
                        //     }catch (e) {
                        //         console.log("原生方法未注入", error)
                        //     }
                        // }else{
                        //     try{
                        //         window.webkit.messageHandlers.toLogin.postMessage({});
                        //     }catch (e) {
                        //         console.log("ios方法未注入", error)
                        //     }
                        // }
                    }
                    return
                case 403 || 400:
                    message = error.response.data.path + ',' + error.response.data.message
                    break
                 case 500:
                     message = '网络繁忙，请稍后再试'
                     break
                 case 502:
                     message = '连接服务器失败'
                     break
                default:
                    message = error.response.data.message ? error.response.data.message : '网络繁忙，请稍后再试'
                    break
            }
            // Toast({message: message, position: 'bottom', duration: 1000});
            // 请求错误处理
            return Promise.reject(error)
        } else {
            message = '网络繁忙，请稍后再试'
            // Toast({message: message, position: 'bottom', duration: 1000});
            return Promise.reject(error)
        }
    }
)

export default service

两个文件的区别在于请求参数config.method的处理

2、config文件下新建index.js

export default {
  /**
   * @description token在Cookie中存储的天数，默认7天
   */
  cookieExpires: 7,

  /**
   * @description api请求基础路径
   */
  baseUrl: {
    dev:'http://test.xxx.com',
    pro:'http://test.xxx.com/',
  },
	// projectName:'xxxx',
  
  /**
   * @description 默认打开的首页的路由name值，默认为home
   */
//   homeName: 'home'
}

3、api文件下新建你需要的文件 这里的test.js仅用于测试

test.js

import request from '@/service/index'
import postJson from "@/service/postJson"

// 获取地区的筛选
/**
 * 无参数
 */
export const getCityArea = () => {
    return request({
        url: 'xxxxxx',
        method: 'get',
        isLoading:true,
    })
}

使用封装的axios接口，请求数据

<template>
    <div class="home">
        <div class="fz-14">home</div>
    </div>
</template>
<script>
import {getCityArea} from '@/api/test'
export default {
    name: 'home',
    data() {
        return {

        }
    },
    created(){
        this.getData()
    },
    computed:{
    },
    methods:{
        async getData(){
            let res  = await getCityArea()
        }
    },
}
</script>
<style lang="scss" scoped>
.test{
    font-size: 24px;
}
</style>

在这里插入图片描述

成功获取到接口的数据，此时axios的封装完成，有什么需要的可以继续添加到以上对应文件里面。

牛先森家的牛奶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue项目axios封装使用(1)
2401_84092832的博客
04-20 807
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。所以看完之后，还是多多行动起来吧！可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**
vue 中 axios 封装及使用
Ivan的编程随笔
07-24 441
在开发vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。它有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。 可根据项目需要对axios进行了二次封装，以便于对接口api进行统一管理
axios封装—vue3项目
前端咸鱼翻身的博客
03-21 8853
config里面配置请求前的一些处理，例如：数据转化，配置请求头，设置token,设置loading等，根据需求去添加。在request.js文件同级目录内新建。
vue3中axios整体封装
weixin_46801545的博客
07-28 7250
vue3.x中封装axios，结合async和await，单独维护http模块和api模块，附配置代理
vue3.0(十六)axios详解以及完整封装方法
最新发布
chengcheng9876的博客
07-03 4354
axios详解以及完整封装方法
vue封装axios
weixin_47586598的博客
09-02 7912
vue封装axios
Vue：vue3中封装Axios请求
weixin_52797441的博客
09-21 1万+
vue3中封装Axios请求
Vue3+Axios网络请求封装
土拨鼠博客
05-30 2750
Axios是基于Node.js的HTTP客户端，也是一款广泛使用的网络请求库。它具有使用简单、可扩展性高、易用性好等特点，因此成为大多数前端开发者的首选，从而衍生了很多基于axios封装的网络请求库。今天我们要介绍的网络请求库是基于axios封装的，命名为Axios，它实现了自动携带token、拦截请求和响应等操作，能够处理请求重复、超时和错误状态码等异常情况。
vue axios封装 axios 请求
03-27
vue axios封装 axios 请求
详解vue中axios的使用与封装
10-17
主要介绍了vue中axios的使用与封装，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
详解Vue前端对axios的封装和使用
10-17
主要介绍了Vue前端对axios的封装和使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue 里面使用axios 和封装的示例代码
08-29
在本篇文章中，我们将介绍如何在 Vue 项目中使用 Axios 库，并提供一个封装的示例代码，用于实现全局的 Ajax 请求。 首先，让我们来看一下 Axios 库的基本用法。Axios 库提供了两个主要的方法：`axios.get()` 和 `...
vue的axios封装
m0_55333789的博客
03-21 1630
vue的axios封装
vue3项目中封装axios
热门推荐
weixin_44416058的博客
05-13 2万+
目前前端最流行的网络请求库还是axios，所以对axios的封装很有必要，此次基于vue3+ts的环境下。 axios的基本使用 import axios from 'axios' // console.log('adh') axios.get('http://XXX.xxx.xxx.xxx:8000/home').then((res) => { console.log(res.data) }) axios.get()会返回一个Promise对象,所以可以用.then获取返回的数据。 axios
vue项目中封装axios
m0_75201975的博客
03-15 948
vue项目中axios的封装，第一层，二层封装。
Vue Axios 格式封装
然后他就拿棍子来打我
05-07 3490
http 在man.js 引用，Vue.prototype.$http = http;// axios请求。
vue axios封装
weixin_67420857的博客
04-20 794
第二步：在 src 文件下创建一个 api.js 文件。第三步：在 main.js 文件中声明原型使用它。第四步：在页面中使用。
vue中axios的介绍及封装(看这一篇就够了!)
唯见青山不见君
11-25 5407
vue中axios的介绍及封装(看这一篇就够了!)
vue3中axios封装使用
09-08
在Vue 3中使用Axios进行封装，你可以按照以下步骤进行操作： 1. 首先，安装Axios。在终端中运行以下命令来安装Axios： ```bash npm install axios ``` 2. 创建一个封装Axios的模块。在项目中创建一个名为`api.js`...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值