[JavaScript知识库]vue3封装axios请求

npm安装axios

npm install axios

创建http.js文件

// 引入axios
import axios from "axios";
// 设置请求基准地址
axios.defaults.baseURL = "http://api.xxxx.xx/";
// 导出封装方法
export default {
  get(url, params) {
    return new Promise((resolve, reject) => {
      axios
        .get(url, {
          params: params,
        })
        .then((response) => {
          resolve(response.data);
        })
        .catch((err) => {
          reject(err);
        });
    });
  },
  post(url, data) {
    return new Promise((resolve, reject) => {
      axios
        .post(url, data)
        .then((response) => {
          resolve(response.data);
        })
        .catch((err) => {
          reject(err);
        });
    });
  },
};

在main.js中将方法挂载到全局

import httphelper from "@/assets/js/http.js";
const app = createApp(App);
app.config.globalProperties.$http = httphelper;

调用方法

this.$http.get("xxxx", {
    type: 0,
})
.then((res) => {
    if (res.code == 200) {
       this.linkList = res.data;
    }
});

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖