vue3封装axios请求

Posted 初辰ge

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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周边激励大奖

以上是关于vue3封装axios请求的主要内容,如果未能解决你的问题,请参考以下文章

vue3+uniapp封装请求总是出错

VUE3封装axios网络请求

Vue3+TypeScript封装axios并进行请求调用

Vue3 抽离封装axios

Vue3 在Axios中添加数据来自于sessionStorage的请求头(请求头添加token)

Vue3 在Axios中添加数据来自于sessionStorage的请求头(请求头添加token)