vue3组合式 API:使用axios调接口方式

最新推荐文章于 2024-07-08 16:50:09 发布

Life a dream

最新推荐文章于 2024-07-08 16:50:09 发布

阅读量1.9k

点赞数

分类专栏：笔记文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Li8L9xF/article/details/125803374

版权

笔记专栏收录该内容

21 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue3项目中使用axios进行请求封装，包括设置全局配置、添加请求拦截器进行参数加密和权限检查，以及响应拦截器处理错误和成功响应。通过实例演示了如何在request.js中管理和调用封装后的API。

摘要由CSDN通过智能技术生成

使用方式：新建request.js文件。

封装axios请求:
      注入请求拦截器：做请求前处理（参数加密，接口带token等等）。
      响应拦截器：（响应参数处理）

项目安装axios

npm install axios -S

代码实现
（注意util文件我就不复制了，将就看。。。。实在不懂看我给axios添加加密文章添加链接描述）
baseUrl 还是懂的吧

import axios from 'axios'
import util from "../Util"

axios.defaults.timeout = 50000
// 返回其他状态吗
axios.defaults.validateStatus = function (status) {
  return status >= 200 && status <= 500 // 默认的
}
// 跨域请求，允许保存cookie
axios.defaults.withCredentials = true
// HTTPresponse拦截
axios.interceptors.response.use(res => {
  const status = Number(res.status)
  const message = res.data.msg || errorCode[status] || errorCode['default']
  if (status === 401) {
    logOut()
    return
  }
  if ((status !== 200 || res.data.code === 1) && res.config.url.indexOf("refresh_token") < 0) {
    Message({
      message: message,
      type: 'error'
    })
    return Promise.reject(new Error(message))
  }
  return res
}, error => {
  return Promise.reject(new Error(error))
})

export default function request(config, data = {}) {
 
  const Public = data
  let httpDefaultOpts = resolveRes ? {
    method: config.method || 'POST',
    url: util.baseUrl + config.url,
    headers: {
      Authorization: config.needToken ? getToken('access_token') : 'Basic cGlnOnBpZw==',
      'TENANT-ID': '1',
      isToken: false,
    },
    responseType: "blob",
    data: Public
  } : {
    method: config.method || 'POST',
    url: util.baseUrl + config.url,
    headers: {
      Authorization: config.needToken ? getToken('access_token') : 'Basic cGlnOnBpZw==',
      'TENANT-ID': '1',
      isToken: false,
    },
    data: Public
  }
  // const loading = this.$loading({
  //   lock: true,
  //   text: "加载",
  //   spinner: "el-icon-loading",
  //   background: "rgba(0, 0, 0, 0.7)",
  // });
  return new Promise((resolve, reject) => {
    axios(httpDefaultOpts)
      .then(res => {
        // loading.close();
        if(res.data.sign){
          if (resolveRes) {
            resolve(res);
          } else if (res.code === 0) {
            resolve(res)
          } else {
            resolve(res.data)
          } 
        }else{
         console.log('不加密');
          if (resolveRes) {
            resolve(res);
          } else if (res.data.code === 0) {
            resolve(res.data)
          } else  {
            resolve(res.data)
          }
        }
      })
      .catch(err => {
        // loading.close();
        reject(err)
      })
  })

}

入口文件引入，

import request from "@/api/request";
const app = createApp(App);
app.config.globalProperties.$http = request;

使用vue3组合式 API

组件使用

import {roleList} from '@/api/api'
import {
  getCurrentInstance,
  defineComponent,
  onMounted,
  reactive,toRefs
} from "vue";
export default defineComponent({
  props: "",
  components: "",
  setup(props, context) {
    //引用全局变量
    const { proxy } = getCurrentInstance();//必须proxy，生产环境才有效
    let state = reactive({
      buttonName: "点击发送请求",
      name:''
    });
    //dom挂载后
    onMounted(() => {
      sendHttp();
    });
    function onclick(){
      state.name = 'ces'
    }
    // setInterval(()=>{
    //   state.name += '--'
    // }, 1000)
    function sendHttp() {
      proxy.$http(roleList,{type:1}).then(res =>{
        console.log(res)
      })
    }
    return {
      ...toRefs(state),
      sendHttp,
      onclick
    };
  },
});