vue项目axios封装优化

vue项目axios封装

1.将axios封装为一个单独文件

步骤：

• a. 在 utils文件夹中（没有就在src里面创建一个文件夹）创建一个文件： http.js
• b. 在文件中：
  - 导入 axios
  - 给 axios 设置基准地址
  - 给 axios 设置拦截器
  - 暴露axios实例**
  • 代码:

  - // 导入 axios 
			import axios from "axios";
			// 创建一个新的axios对象
			let instance = axios.create({
			//给axios设置基地址
			    baseURL: "url基地址"
			})
			
			**// 设置请求拦截器 官网GitHub搜索 axios**
			instance.interceptors.request.use(function (config) {
			//可以写你需要拦截的代码逻辑
			    return config;
			}, function (error) {
			    return Promise.reject(error);
			});
			// 响应拦截器 
			instance.interceptors.response.use(function (response) {
			//dosomething
			    return response;
			}, function (error) {
			    return Promise.reject(error);
			});
			
			// 暴露 axios 实例 
			export default instance

-c. 谁请求，谁导入

2. 将网站请求单独封装到一个文件中

将请求统一管理，方便维护，当然也可以分类的管理，看你项目维护怎么方便就怎么写

步骤：

• a. 在 util文件夹中创建一个文件：api.js
• b. 在文件中
  • 导入自己封装的 axios
  • 封装一个用来登录的方法
  • 将方法暴露出去
  • 代码:

		// 优化2.将网站请求单独封装到一个文件中
		//导入封装好的axios 
		import http from '../utils/http.js';
		
		// 封装登录方法 
		function apiLogin({ mobile,code}){   //最好把需要传的参数写具体了,看了明白
		return http({
		    url:"/authorizations",
		    method: "post",
		    data: {
		        mobile,
		        code
		    }
		});
		}
		// 按需导出
		export { apiLogin }

c. 在外界导入这个方法（如login.vue文件中）

import { apiLogin } from "../../api/api.js";

d. 请求

// 例如login.vue文件中
// 发送请求到服务器
      apiLogin({
      //写需要的参数
      mobile：this.mobile,
	   code: this.code
      })
        .then(res => {
          //成功回调
          console.log(res);
          // 跳转到首页
          this.$router.push("/home");
        })
        .catch(error => {
          console.log("出错啦");
        });

3.将请求使用async&await来进行改造

回调函数使用的太过频繁，尤其是异步请求中，async & awiat 目标就是用来解决异步请求中回调函数
如果让异步请求使用 async & await 来修饰的话，那么 异步请求 可以以同步方式书写代码

-使用方法：
async ：用来修饰异步函数所在的函数
await：用来修饰异步函数
将异步代码返回的结果以同步的方式进行接收

步骤：

• a. 使用 async 修饰 login 方法
• b. 使用 await 修饰 apiLogin 请求
• c. 用 res 来接收方法的返回值
• d. 用 try 将所有代码包裹起来
• e. 用 catch 处理报错信息

- async login() {
      if (!this.checkout()) {
        return;
      }
      /*
    在js中有一种错误处理机制 try-catch 
    将可能报错的代码放到try 中
    将出错的处理逻辑放到catch中
    */
      try {
        // 发送请求到服务器, 提交数据
        let res = await apiLogin(this.user);
        this.$router.push("/home");
      } catch (error) {
        console.log("出错了");
      }
    },