Vue中基础的Axios封装

---

1.Vue中安装 Axios

npm install axios 

2.创建目录

在src目录下创建api目录,并且在api目录中创建 http.js和index.js文件

3.打开http.js文件进行编辑

在http.js 这个文件中, 主要存放的内容是我们需要封装的 axios

//导入Vue
import Vue from "vue";
//导入axios
import axios from "axios";
//进行axios全局配置
axios.defaults.baseURL = Vue.prototype.BASE_API_URL; //默认地址
axios.defaults.timeout = 10000;//超时时间
axios.defaults.withCredentials = true;//是否允许携带信息
// 封装自己的get/post方法
export default {]
//path是路径,data是参数
//.then接受请求成功后返回的结果
//.catch接受请求失败后返回的结果
//如果不了解promise的同学建议先去了解一下promise
 get: function (path = "", data = {}) {
  return new Promise(function (resolve, reject) {
   axios
     .get(path, {
      params: data,
     })
     .then(function (response) {
      resolve(response.data);
     })
     .catch(function (error) {
      reject(error);
     });
  });
 },
 post: function (path = "", data = {}) {
  return new Promise(function (resolve, reject) {
   axios
     .post(path, data)
     .then(function (response) {
      resolve(response.data);
     })
     .catch(function (error) {
      reject(error);
     });
  });
 },
};

注意点

---

在get和post的then方法中,所有的数据指向都直接指向了data,如果你获取的数据不是存放在data里面的, 请自行删除response.data中的.data

---

4.打开index.js文件进行编辑

在index.js 这个文件中, 主要存放的内容是我们的api接口

引入http.js文件

import http from "./http";

get请求(不需要传参)

export const 名称 = () => http.get("地址");

get请求(需要传参)

export const 名称 = (data) => http.get("地址",data);

post请求(不需要传参)

export const 名称 = () => http.post("地址");

post请求(需要传参)

export const 名称 = (data) => http.post("地址",data);

5.在组件中使用

1. 在script中导入

import {名称,名称,名称...} from "../api/index"

2. 在钩子函数中使用

 名称()
   .then((res) => {
      console.log(res);
   })
   .catch((err) => {
      console.log(err);
   })

注意点

---

这里为了方便, 直接展示用promise的方法进行数据的调用, 如果你觉得你需要调用多重数据, 那么我建议你使用async和await,避免回调地狱

---

❤️ 看完三件事
如果你觉得这篇内容对你挺有启发，我想邀请你帮我三个小忙:

---

点赞,在看,收藏 让更多的人也能看到这篇内容 关注公众号「前端自救指北」，不定期分享原创知识。

---

如需进入前端交流群可添加小渔微信回复加群即可

-END-