axios的封装(保姆级别)

于 2024-01-12 10:39:04 发布
阅读量1k 收藏 15
点赞数 13
文章标签： 前端 vscode html vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51391923/article/details/132146737
版权

文章目录

    • 安装
    • api的统一管理

  安装

打开编译器终端通过 npm install axios; 通过npm命令安装，也可以通过yarn (看自己习惯)

1.引用：

在项目的src目录中，新建一个request文件夹，然后在里面新建一个http.js和一个api.js文件。http.js文件用来封装我们的axios，api.js用来统一管理我们的接口。

// 在http.js中引入axios
import axios from 'axios'; // 引入axios
import QS from 'qs'; // 引入qs模块，用来序列化post类型的数据，后面会提到
// vant的toast提示框组件，大家可根据自己的ui组件更改。
import { Toast } from 'vant'; 
 
// 环境的切换
if (process.env.NODE_ENV == 'development') {    
    axios.defaults.baseURL = 'https://www.baidu.com';} 
else if (process.env.NODE_ENV == 'debug') {    
    axios.defaults.baseURL = 'https://www.ceshi.com';
} 
else if (process.env.NODE_ENV == 'production') {    
    axios.defaults.baseURL = 'https://www.production.com';
}
设置请求超时
通过axios.defaults.timeout设置默认的请求超时时间。例如超过了10s，就会告知用户当前请求超时，请刷新等。
 
axios.defaults.timeout = 10000;
post请求的时候，我们需要加上一个请求头，所以可以在这里进行一个默认的设置，即设置post的请求头为application/x-www-form-urlencoded;charset=UTF-8
请求头可以按照自己的需求进行修改，例如上传文件的时候就需要修改请求头。
 
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
请求拦截（可以到axios官网，具有更加详细的介绍）
有些请求是需要用户登录之后才能访问的，或者post请求的时候，我们需要序列化我们提交的数据。这时候，我们可以在请求被发送之前进行一个拦截，从而进行我们想要的操作。
 
请求拦截
// 先导入vuex,因为我们要使用到里面的状态对象（现在vue3的出现vuex不在维护，使用pina更加的方便，看自己的需求）
// vuex的路径根据自己的路径去写
import store from '@/store/index';
 
// 请求拦截器axios.interceptors.request.use(    
    config => {        
        // 每次发送请求之前判断vuex中是否存在token        
        // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
        // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断 
        const token = store.state.token;        
        token && (config.headers.Authorization = token);        
        return config;    
    },    
    error => {        
        return Promise.error(error);    
})
这里说一下token，一般是在登录完成之后，将用户的token通过localStorage或者cookie存在本地，然后用户每次在进入页面的时候（即在main.js中），会首先从本地存储中读取token，如果token存在说明用户已经登陆过，则更新vuex中的token状态。然后，在每次请求接口的时候，都会在请求的header中携带token，后台人员就可以根据你携带的token来判断你的登录是否过期，如果没有携带，则说明没有登录过。 
// 响应拦截器

响应拦截器就是服务器返回给我们的数据，我们在拿到之前可以对他进行一些处理，后台返回的状态码是200，则正常返回数据，否则的根据错误的状态码类型进行一些我们需要的错误，其实这里主要就是进行了错误的统一处理和没登录或登录过期后调整登录页的一个操作。
axios.interceptors.response.use(    
    response => {   
        // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据     
        // 否则的话抛出错误
        if (response.status === 200) {            
            return Promise.resolve(response);        
        } else {            
            return Promise.reject(response);        
        }    
    },    
    // 服务器状态码不是2开头的的情况
    // 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等
    error => {            
        if (error.response.status) {            
            switch (error.response.status) {                
                // 401: 未登录
                // 未登录则跳转登录页面，并携带当前页面的路径
                // 在登录成功后返回当前页面，这一步需要在登录页操作。                
                case 401:                    
                    router.replace({                        
                        path: '/login',                        
                        query: { 
                            redirect: router.currentRoute.fullPath 
                        }
                    });
                    break;
 
                // 403 token过期
                // 登录过期对用户进行提示
                // 清除本地token和清空vuex中token对象
                // 跳转登录页面                
                case 403:
                     Toast({
                        message: '登录过期，请重新登录',
                        duration: 1000,
                        forbidClick: true
                    });
                    // 清除token
                    localStorage.removeItem('token');
                    store.commit('loginSuccess', null);
                    // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面 
                    setTimeout(() => {                        
                        router.replace({                            
                            path: '/login',                            
                            query: { 
                                redirect: router.currentRoute.fullPath 
                            }                        
                        });                    
                    }, 1000);                    
                    break; 
 
                // 404请求不存在
                case 404:
                    Toast({
                        message: '网络请求不存在',
                        duration: 1500,
                        forbidClick: true
                    });
                    break;
                // 其他错误，直接抛出错误提示
                default:
                    Toast({
                        message: error.response.data.message,
                        duration: 1500,
                        forbidClick: true
                    });
            }
            return Promise.reject(error.response);
        }
    }    
});
2.封装get方法和post方法 

get请求和post请求的区别：

  1. 参数传递方式：GET请求将参数包含在URL中，即在URL的末尾使用问号（?）将参数和参数值连接起来，多个参数之间使用&符号分隔。而POST请求将参数放在请求体中，不会显示在URL上。

  2. 参数大小限制：由于GET请求的参数是包含在URL中的，URL长度是有限制的，不同的浏览器和服务器对URL长度的限制不同，通常浏览器会限制在2048个字符以内。而POST请求的参数是放在请求体中的，没有URL长度的限制。

  3. 安全性：GET请求的参数会显示在URL中，因此参数是以明文形式传递的，比较不安全，例如登录时，用户名和密码以明文形式显示在URL中，容易被截获。而POST请求的参数在请求体中，相对于GET请求更安全，不会直接显示在URL上。

  4. 幂等性：GET请求是幂等的，也就是说对同一个URL多次请求会返回同样的结果。而POST请求不是幂等的，多次请求会对服务器产生不同的副作用。

get请求：get函数有两个参数，第一个参数请求的url地址，第二个参数是携带的请求参数。get函数返回一个promise对象，当axios其请求成功时resolve服务器返回 值，请求失败时reject错误值。

**
 * get方法，对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function get(url, params){    
    return new Promise((resolve, reject) =>{        
        axios.get(url, {            
            params: params        
        }).then(res => {
            resolve(res.data);
        })
});}

post方法：POST请求适用于参数较多，安全性要求较高，不幂等的场景，如提交表单、发送数据等。

/** 
 * post方法，对应post请求 
 * @param {String} url [请求的url地址] 
 * @param {Object} params [请求时携带的参数] 
 */
export function post(url, params) {
    return new Promise((resolve, reject) => {
         axios.post(url, QS.stringify(params))
        .then(res => {
            resolve(res.data);
        })
    });
}

api的统一管理完整代码

import axios from 'axios';import QS from 'qs';
import { Toast } from 'vant';
import store from '../store/index'
 
// 环境的切换
if (process.env.NODE_ENV == 'development') {    
    axios.defaults.baseURL = '/api';
} else if (process.env.NODE_ENV == 'debug') {    
    axios.defaults.baseURL = '';
} else if (process.env.NODE_ENV == 'production') {    
    axios.defaults.baseURL = 'http://api.123dailu.com/';
}
 
// 请求超时时间
axios.defaults.timeout = 10000;
 
// post请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
 
// 请求拦截器
axios.interceptors.request.use(    
    config => {
        // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
        // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
        const token = store.state.token;        
        token && (config.headers.Authorization = token);        
        return config;    
    },    
    error => {        
        return Promise.error(error);    
    })
 
// 响应拦截器
axios.interceptors.response.use(    
    response => {        
        if (response.status === 200) {            
            return Promise.resolve(response);        
        } else {            
            return Promise.reject(response);        
        }    
    },
    // 服务器状态码不是200的情况    
    error => {        
        if (error.response.status) {            
            switch (error.response.status) {                
                // 401: 未登录                
                // 未登录则跳转登录页面，并携带当前页面的路径                
                // 在登录成功后返回当前页面，这一步需要在登录页操作。                
                case 401:                    
                    router.replace({                        
                        path: '/login',                        
                        query: { redirect: router.currentRoute.fullPath } 
                    });
                    break;
                // 403 token过期                
                // 登录过期对用户进行提示                
                // 清除本地token和清空vuex中token对象                
                // 跳转登录页面                
                case 403:                     
                    Toast({                        
                        message: '登录过期，请重新登录',                        
                        duration: 1000,                        
                        forbidClick: true                    
                    });                    
                    // 清除token                    
                    localStorage.removeItem('token');                    
                    store.commit('loginSuccess', null);                    
                    // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
                    setTimeout(() => {                        
                        router.replace({                            
                            path: '/login',                            
                            query: { 
                                redirect: router.currentRoute.fullPath 
                            }                        
                        });                    
                    }, 1000);                    
                    break; 
                // 404请求不存在                
                case 404:                    
                    Toast({                        
                        message: '网络请求不存在',                        
                        duration: 1500,                        
                        forbidClick: true                    
                    });                    
                break;                
                // 其他错误，直接抛出错误提示                
                default:                    
                    Toast({                        
                        message: error.response.data.message,                        
                        duration: 1500,                        
                        forbidClick: true                    
                    });            
            }            
            return Promise.reject(error.response);        
        }       
    }
);
/** 
 * get方法，对应get请求 
 * @param {String} url [请求的url地址] 
 * @param {Object} params [请求时携带的参数] 
 */
export function get(url, params){    
    return new Promise((resolve, reject) =>{        
        axios.get(url, {            
            params: params        
        })        
        .then(res => {            
            resolve(res.data);        
        })        
    });
}
/** 
 * post方法，对应post请求 
 * @param {String} url [请求的url地址] 
 * @param {Object} params [请求时携带的参数] 
 */
export function post(url, params) {    
    return new Promise((resolve, reject) => {         
        axios.post(url, QS.stringify(params))        
        .then(res => {            
            resolve(res.data);        
        })        
    });
}

始终坚持在保安岗位
关注
  • 13
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue axios封装 axios 请求
03-27
vue axios封装 axios 请求
axios 封装
12-11
Vue axios 二次封装 多种请求自适应 ** Fn: axios ** Intro: 公用封装的axios 已在main.js中进行 $axios代理 ** Intro: Store.state.permission.constUrl 为公用的接口前缀地址 ** Intro: url 方法接受参数 为...
axios详解以及完整封装方法
最新发布
zrblue的博客
01-01 1万+
❤️胸有惊雷而面如平湖者，可拜上将军也。
axios 最详细封装
热门推荐
m0_58481462的博客
08-17 4万+
axios 最详细封装
axios封装
weixin_43239880的博客
04-14 4992
基础的axios即可满足大部分项目的需求，配置loading和取消重复请求就见仁见智了，可加可不加。
axios的简单封装
qq_39445190的博客
03-21 5447
对axios进行简单的封装
axios的封装
tim_hjh的博客
06-13 2339
简介:在发送axios请求的时候,我们会发现大多数的请求地址都有他的公共部分,都需要重复书写,我们程序员应该将这些重复的代码单独封装出来,设置相应的接收参数,让其实现灵活调用.axios封装好后就可以随心所欲的调用啦,不仅可以让代码更加简洁,并且可维护性更好,模块化的书写方式同样可以代码更灵活!1.首先引入axios(前提是通过npm或者文件或者其他方式,让它存在嗷)(我这里是通过npm下的包,其他方式同理)
react + ts or vue + ts 通用axios封装的方法。
07-21
react + ts or vue + ts 通用axios封装的方法。 封装通用ts类型，封装通用requestMode.ts，统一存放api请求路径
若依之中对于axios的封装
06-09
若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依...
封装axios.js
07-01
封装axios.js,带token拦截的，GET和POST都有，还有PUT和DELETE
Axios封装
weixin_57844432的博客
03-17 2329
axios 是一个轻量的 HTTP客户端基于 XMLHttpRequest 服务来执行 HTTP 请求，支持丰富的配置，支持 Promise，支持浏览器端和 Node.js 端。自Vue2.0起，尤大宣布取消对 vue-resource 的官方推荐，转而推荐 axios。现在 axios 已经成为大部分 Vue 开发者的首选特性从浏览器中创建 XMLHttpRequests从 node.js 创建 http请求支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求。
Axios的多种封装方法
m0_50553098的博客
08-30 1672
Axios是一个基于Promise的HTTP客户端，可用于浏览器和Node.js环境中。它提供了多种封装方法来方便我们使用。以上是Axios的常见封装方法，可以根据具体需求进行相应的调整。
总结一下axios的封装方法
gaowencheng01的博客
03-06 2973
axios的简单封装与深层封装，请求接口的配置。
【axios】封装axios
余浩的博客
06-27 3154
Axios是一个基于 promise的 HTTP`库，可以用在浏览器和node.js中。(本文围绕XHR) axios提供两个http请求适配器，XHR和HTTP。 XHR的核心是浏览器端的XMLHttpRequest对象； HTTP的核心是node的http.request方法。
axios 完整封装
m0_74292570的博客
07-08 1231
我们可以看到返回的数据很多都是我们不需要的,我们需要的只有 data 中的数据,所以这时候我们便需要一个响应拦截器进行处理,同时在响应拦截器中我们不仅仅简单处理这个问题,还需要对后端返回的状态码进行判断,如果不是正确的状态码可以弹窗提示后端返回的描述(也可以自定义)因此,我们可以定义一个变量用于记录正在请求的数量,当该变量为 1 时开启 loading,当变量为 0 时关闭 loading,同样的我们还定义了 config 中的 loading 让开发者自己决定是否开启 loading,实现如下。
axios封装，包括基本封装以及若干非必要封装（自定义方法、监听上传/下载进度、中断请求、接口loading）
ymzhao
05-29 2314
axios 是前端开发的基本工具之一，它的封装早就不新鲜了 本文分为两部分：一是 axios 基本封装示例；二是非必要封装，列举个人开发中遇到的一些较为实用的封装需求。
avue axios封装
06-28
### 回答1： Axios 是一种流行的 HTTP 请求库，使得在前端页面和后端 API 交互更加简便。但是，直接使用 Axios 进行 API 请求可能会导致代码冗余。因此，出现了许多 Axios 的封装方案，其中包括 Avue Axios 封装。 Avue Axios 封装基于 Axios 进行了一些优化和扩展，以更好地适应开发者的需求。通过 Avue Axios 封装，可以对请求进行统一处理，快速集成请求拦截器和响应拦截器，实现统一数据格式处理等功能。 具体地说，Avue Axios 封装具有如下特点： 1. 实现了 baseURL 的配置，可以方便地管理 API 请求地址。 2. 通过拦截器实现了请求头参数配置、请求参数加密、请求 loading 等功能。 3. 通过响应拦截器实现了数据格式化、状态码统一处理等功能。 4. 实现了配置文件和接口文件分离的方式，更方便管理接口文件和 API 的配置信息。 5. 支持 get、post、put、delete 等请求方法。 使用 Avue Axios 封装可以提高代码的可维护性和可读性，并且大大减少代码量，提高开发效率。同时，可以快速解决一些通用的请求问题，如请求头参数的添加、请求参数的统一处理等。 总之，Avue Axios 封装是一个非常实用的 Axios 封装方案，可以方便地集成到 Vue 项目中，提高 API 请求的效率和可靠性。 ### 回答2： Axios是一个流行的前端HTTP请求库，它提供了许多有用的特性和易用的API。然而，在使用Axios时，我们仍然需要编写很多样板代码，例如处理请求错误、设置通用请求头等。为了解决这些问题，我们可以将Axios进行封装，以便于在项目中更加方便地使用。 在vue项目中，我们可以使用第三方库avue来进行Axios的封装。Avue是一个基于Vue的管理后台开发框架，它提供了许多组件和工具，可以大大提高开发效率。其中，它提供了一个Axios封装模块，让我们可以更加方便地使用Axios。 Avue的Axios封装模块提供了如下特性： 1. 统一处理请求错误：当请求出错时，会自动进行处理，弹出错误提示框，并记录错误日志。 2. 统一设置通用请求头：我们可以在封装模块中设置通用的请求头，例如用于身份验证的Token。 3. 统一处理请求返回结果：返回结果会经过一系列处理，例如对请求返回的数据进行格式化处理、进行状态码的判断等。 4. 支持多种请求类型：支持常用的HTTP请求类型，例如GET、POST、PUT等。 使用Avue的Axios封装模块非常简单，我们只需要在项目中引入封装模块，然后在需要的地方使用即可。例如，在Vue组件中，我们可以通过this.$http.get()来发起GET请求，通过this.$http.post()来发起POST请求。在发起请求时，我们可以传入URL、请求参数等信息。如果请求出错，封装模块会自动进行错误处理，我们不需要额外编写错误处理逻辑。如果请求成功，我们可以通过then()函数来处理返回结果。 总之，使用Avue的Axios封装模块可以大大提高我们的开发效率，减少样板代码的编写，让我们更加专注于业务代码的编写。 ### 回答3： Axios是一个广泛使用的基于Promise的HTTP客户端，用于在浏览器和Node.js中发送HTTP请求。随着前后端分离的兴起，Axios成为了前端开发的必备工具之一。 但是在实际开发中，我们可能需要对Axios进行一些封装，以满足自己的需求。avue axios就是这样一种Axios封装。 avue axios是一个基于Axios的二次封装，旨在提供更为常用且易用的方法方式，让前端开发更加得心应手。封装后的avue axios提供了诸如GET、POST、PUT、DELETE等方法，同时也封装了拦截器、请求头、超时时间、状态码和响应格式等功能。 在使用avue axios时，我们仅需进行简单的配置即可完成对Axios的二次封装。首先，需要创建一个axios i实例，这个实例就是我们的二次封装。 ```javascript import axios from 'axios'; import qs from 'qs'; // 创建axios实例 const service = axios.create({ baseURL: process.env.BASE_API, // 对于API请求的基础URL timeout: 5000, // 超时时间 headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' // 请求头类型 } }); // request拦截器 service.interceptors.request.use( config => { // 在请求之前做一些处理 if (config.method === 'post') { config.data = qs.stringify(config.data); } return config; }, error => { // 处理请求错误 Promise.reject(error); } ); // response拦截器 service.interceptors.response.use( response => { // 在响应之前做一些处理 return response.data; }, error => { // 在响应错误之前做一些处理 return Promise.reject(error); } ); export default service; ``` 如上所示，我们首先调入了Axios和qs，并通过create()方法创建了一个axios实例，实例中含有baseURL（API请求的基础URL）、timeout（超时时间）、headers（请求头类型）等参数。 接下来，我们使用interceptors拦截器对请求和响应做了一些处理。对于请求，我们做了处理后返回config；对于响应，我们返回了响应数据。 最后，通过export default实现了模块输出，使得这个二次封装的axios实例可以在整个项目中被使用。 总的来说，avue axios具有以下优点： 1.易用性：封装后的avue axios可以更加方便地实现HTTP请求，减少了开发者的工作量。 2.高扩展性：通过拦截器、请求头、超时时间、状态码和响应格式等功能，可以进行更加广泛和深入的扩展。 3.易于维护：avue axios封装后，可以大大简化代码的重复书写和维护成本。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值