怎么对axios做二次封装

贴一份axios封装的配置吧,希望可以帮助有需要的人

文件1: /src/service/product.js

//统一管理接口
// import requests from './axios';

import axios from 'axios';
const requests = axios.create({
    timeout: 5000,
    withCredentials: true
})

// 请求拦截器
requests.interceptors.request.use((config) => {
    config.headers.Authorization = window.localStorage.getItem('eleToken')
    return config
})

//响应拦截器
requests.interceptors.response.use(res=> {
    return res
}, (error) => {
    return Promise.reject(new Error('fail'))
})
//登录(示范传值为一个or多个参数)
export const login = (data) => {
    return requests({
        url: '/vis/user/login',
        method: 'GET',
        params: data
    })
}
//生成视频(示范传值为一整个对象)
export const createVideo = (data) => {
    return requests({
        url: '/vis/video/createVideo',
        method: 'POST',
        data: data
    })
}
//上传音频(示范传值为formdata)
export const uploadAudio = (data) => {
    return requests({
        url: '/vis/video/uploadAudio',
        method: 'POST',
        data: data
    })
}

文件2:/src/view/beforelogin/index.vue

<script>
import { login, uploadAudio, createVideo } from "@/service/product";

export default {
  name: "",
  data() {
    return {
       phone: "17826660717",
       code: "666666",
    };
  },
  components: {
    loginRegister,
  },
  methods: {
    login() {
      //用户点击登录,后端返回验证结果
      login({
        code: this.code,
        phone: this.phone,
      }).then((res) => {
        console.log("登录返回", res);
        const token = res.data.msg;
        localStorage.setItem("eleToken", token);
        if (res.data.code == "10000") {
          this.$message({
            type: "success",
            message: "登录成功",
          });
          // 以下为vuex,不需要可以删掉
          this.$store.commit("setUserName", res.data.data.userName);
          this.$store.commit("setId", res.data.data.id);
          this.$store.commit("setPhone", res.data.data.phone);
          this.$router.push("/home");
        } else {
          console.log("没有返回code=10000,登录失败");
        }
   
      });
     },    
    uploadAudio(){
        let formData = new FormData();
        formData.append("file", file.file);
        formData.append("model_id", this.model[this.mChoiceIndex].id);
        formData.append(
          "generate_portrait_type",
          this.model[this.mChoiceIndex].generatePortraitType
        );
        //上传
        uploadAudio(formData).then((res) => {
          this.uploadAudioSuccess(res);
        });
        }
    },
    createVideo(){
        createVideo(this.submit_model).then((res) => {
              console.log("提交成功:", res);
         });

    }//最后这些括号是在优快云上编辑的,没有在编译器上检查,可能会有问题的,自己改一下哈
}

axios是一种基于Promise的HTTP客户端,用于浏览器和Node.js。对于一些常见的HTTP请求操作(例如获取、添加、更新和删除数据),它提供了许多有用的功能。 二次封装axios可以更好地适应我们的项目需求,同时提高我们的开发效率。一般来说,我们需要对axios进行二次封装的原因有以下几点: 1. 统一处理请求异常,例如请求超时、网络错误等; 2. 统一处理请求头、请求参数等公共信息; 3. 根据具体的业务需求,进行请求的拦截和转换; 4. 统一处理响应数据,例如对响应数据进行统一的错误处理、响应数据格式化等。 下面是一个简单的二次封装axios的示例代码: ``` import axios from 'axios'; const request = axios.create({ baseURL: 'http://example.com/api', timeout: 5000 }); request.interceptors.request.use(config => { // 统一处理请求头、请求参数等公共信息 config.headers.Authorization = localStorage.getItem('token') || ''; return config; }, error => { // 统一处理请求异常 console.error(error); return Promise.reject(error); }); request.interceptors.response.use(response => { // 统一处理响应数据 const data = response.data; if (data.code !== 0) { console.error(data.message); return Promise.reject(data); } return data.result; }, error => { // 统一处理响应异常 console.error(error); return Promise.reject(error); }); export default request; ``` 上述代码中,我们首先使用`axios.create`方法创建了一个axios实例`request`,并通过`baseURL`和`timeout`属性设置了该实例的默认配置。接着,我们通过`request.interceptors.request.use`和`request.interceptors.response.use`分别定义了请求拦截器和响应拦截器。在这些拦截器中,我们可以对请求和响应数据进行各种处理,例如添加公共请求头、处理异常信息、格式化响应数据等。最后,我们将该实例导出,供项目中其他模块使用。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值