Vue3使用axios

一直用UNIAPP，这次项目要用vue来写，就比较纠结
装了vue3，然后挺多不适应的，记录下接口使用吧

安装

$ npm install axios --save

创建config.js

这里创建拦截器跟配置域名

import axios from 'axios';
import { ElMessageBox } from 'element-plus';

const config = {
  // baseURL: process.env.baseURL
  baseURL: 'https://www.baidu.com/api',
  timeout: 1000,
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
};

const api = axios.create(config);

// 默认 post 请求，使用 application/json 形式
api.defaults.headers.post['Content-Type'] = 'application/json';


//封装下post
api.post = function(url,params){
      return new Promise((resolve, reject) => {
        // console.log("****************************");
        axios({
          method: 'post',
          url:config.baseURL + url,
          params,
          headers: {
            'Content-Type': 'application/json; charset=utf-8',
          },
        }).then(response => {
          if (response.status == 200) {
            //根据实际情况进行更改
            resolve(response)
          } else {
            reject(response)
          }
        })
      })

}

// http response 拦截器
api.interceptors.response.use(
  response => {
    //拦截响应，做统一处理
    if (response.data.code) {
      // console.log(response.status);
      switch (response.status) {
        case 301:
          console.log('登录过期');
          // store.state.isLogin = false
          // router.replace({
          //   path: 'login',
          //   query: {
          //     redirect: router.currentRoute.fullPath
          //   }
          // })
      }
    }
    return response
  },
  //接口错误状态处理，也就是说无响应时的处理
  error => {
    return Promise.reject(error.response.status) // 返回接口返回的错误信息
  })

export default api;

main.js中引用

vue3没有vue2里的vue.prototype，用的这种方式

import api from './assets/config/config';
const app = createApp(App);
app.config.globalProperties.$api = api;

使用

vue3需要在setup中使用proxy来
https://vue3js.cn/docs/zh/api/composition-api.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90

  import {
   onMounted, onUpdated, onUnmounted,
   getCurrentInstance,
} from 'vue';
  setup() {
    const { proxy } = getCurrentInstance();
    console.log('proxy', proxy);
    console.log(proxy.$http);
    proxy.$api.post('/API/URL/GETLIST', {
      params: {

      },
    }).then((res) => {
      console.log(res);
    }).catch((err) => {
      console.log(err);
    });
    return { //必须返回 模板中才能使用
      proxy
    }
  },

在方法调用时

   getList() {
      this.proxy.$api.post('/API/URL/GETLIST', {
        params: {

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

      this.$router.push({
        name: 'Project-list',
      });
    },