axios封装

安装axios：

npm install axios

使用 yarn:

yarn add axios

在src目录下创建一个新的文件夹api，然后在此文件夹下创建一个axios.ts文件.

import axios from "axios";

const http = axios.create({
  baseURL:'http://www....../api/'
})

// 添加请求拦截器
http.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  if (sessionStorage.getItem('token')) {
   config.headers["Authorization"] = `Token ${sessionStorage.getItem('token')}`
  }
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
http.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});

export default http

在main.ts文件中

import http from '@/api/axios';
app.config.globalProperties.$http = http

组件中调用

<script lang="ts" setup>
import { onMounted } from 'vue';
import { getCurrentInstance } from 'vue'
const { proxy }: any = getCurrentInstance()


const getImage = async () => {
       
    await proxy.$http.post('http://www.../api/api-token-auth', {
        username: 'admin',
        password: '123456'
    }).then((res: any) => {

        // console.log(res.data)
        sessionStorage.setItem('token', res.data.token)
    }).catch((error: string) => {
        console.log('失败了');

        console.log(error)
    })

    await proxy.$http.get('http://www.../api/materials').then((res: any) => {
        console.log(res);

    }).catch((error: string) => {
        console.log('失败了');

        console.log(error)
    })
}


onMounted(() => {
    getImage();
})



</script>