vue项目之axios的封装（1）

最新推荐文章于 2025-03-11 19:09:15 发布

置顶 homiYes

最新推荐文章于 2025-03-11 19:09:15 发布

阅读量214

点赞数 3

文章标签： vue.js node.js sass npm es6

本文链接：https://blog.youkuaiyun.com/homiYes/article/details/114311969

版权

不重要的前言

入前端很多年了，第一次在优快云记录，习惯把工作中遇到的问题、值得学习的技术及方法记录在QQ日志里。（hahaha~，我猜很多人会说，啥年代了，居然还有这么low的人。）
因为从第一家公司开始用QQ交流比较多，工作中遇到的问题，如何解决的；或者看到好的技术，顺手记录在QQ日志很方便，也就渐渐习惯了。
我会慢慢将之前记录一些好的内容分享给大家，一起共勉。~

一、简述

通常在做项目的时候，我们会对某些模块进行封装，这不仅防止了代码的冗余，还能大大提高工作效率。下面步入正题：

为什么要封装axios？

简化method方法，少写代码
http错误码及请求返回的code错误码可以集中处理
某些接口需要携带登录后的token

下面就先来讲一下如何 “ 简化method方法 ”，如果不太明白，请耐心往下读~~~

二、axios封装

1. get、post、delet、put方法封装及使用

封装：
首先我在项目的 /src/util 文件下创建了request.js，封装了axios常用的method方法
代码如下（示例）：

	const Axios = axios.create({
	 baseURL: process.env.VUE_APP_BASE_API,
	 timeout: 30000,
	})
	const baseUrl = function(url, method, config) {
	  const configs = {
	    method,
	    url,
	    headers: {}
	  }
	  if (config) {
	    if (method === 'get' || method === 'delet') {
	      configs.params = config
	    } else {
	      configs.data = config
	    }
	  }
	  return new Promise((resolve, reject) => {
	    Axios(configs)
	      .then((res) => {
	        resolve(res)
	      })
	      .catch((error) => {
	        console.log('-------封装axios 的错误：', error.request)
	        reject(error)
	      })
	  })
	}
	/**
	 * ! 封装aixos 中get、post、put、delet方法
	 */
	const method = ['get', 'post', 'put', 'delet']
	const request = method.reduce((total, current) => {
	  total[current] = function(url, config) {
	    return baseUrl(url, current, config)
	  }
	  return total
	}, {})
	// 抛出 request 对象
	export default request

使用（顺带说一下怎么统一管理api请求）：
整齐的api就像电路板一样，即使再复杂也能很清晰整个线路。新建一个indexApi.js,然后在这个文件中存放我们所有的api接口。
a. 在项目的 /src 目录下新建了下图目录及文件；
在这里插入图片描述
b. indexAPi.js里引入了request.js文件里封装好的method方法

我们定义了一个userInfoRequst方法，这个方法有一个参数config，config是我们请求接口时携带的参数对象。而后调用了我们封装的get方法，get方法的第一个参数是我们的接口地址，第二个参数是userInfoRequst 的config参数，即请求接口时携带的参数对象。最后通过export导出userInfoRequst 。

代码如下（示例）：

import request from '../util/request'
// 获取当前登录用户信息
export const userInfoRequst = function(config) {
  return request.get('/user/access', config)
}

c. 然后页面中调用api接口

代码如下（示例）：

import { userInfoRequst } from '@/api/Indexapi';// 导入我们的api接口
export default {        
   name: 'UserInfo',    
   created () {
       this.onLoad();
   },
   methods: {            
       // 获取数据            
       onLoad() {
           // 调用api接口，并且提供了1个参数                
           userInfoRequst({                    
               loginCode: '132131',                                   
           }).then(res => {
               // 获取数据成功后的操作           
           }).catch((error)=>{
              // 处理 Promise 的reject 抛出的错误异常
           })           
       }        
   }
}