vue3+vite的axios的封装与全局使用

1.安装axios

使用npm 或 yarn 安装axios到项目中

// 使用pnpm 安装   pnpm install axios

// 使用npm 安装   npm install axios

// 使用yarn 安装  yarn add axios

axios是一个基于Promise的HTTP请求库，支持Promise API、可以拦截请求和响应、可以转换请求和响应数据、支持取消请求、可以自动转换JSON数据等。 

2.创建文件封装axios

在src同级目录下创建utils(工具)文件夹，创建axios.ts,代码如下：

因为是ts所以有时候会报红，是因为ts语法问题，给每个参或者函数添加类型就可以了。

import axios from 'axios'

// 在config.js文件中统一存放一些公共常量，方便之后维护

// import { baseURL } from './config.js'

const baseURL=""

// 添加请求拦截器，在发送请求之前做些什么

axios.interceptors.request.use(function (config) {

  // 显示loading

  if(localStorage.getItem("token")==null){

    // localStorage.setItem("token","")

  }

  return config

}, function (error) {

  // 请求错误时弹框提示，或做些其他事

  return Promise.reject(error)

})

// 添加响应拦截器

axios.interceptors.response.use(function (response) {

  // 对响应数据做点什么，允许在数据返回客户端前，修改响应的数据

  // 如果只需要返回体中数据，则如下，如果需要全部，则 return response 即可

  return response.data

}, function (error) {

  // 对响应错误做点什么

  return Promise.reject(error)

})

// 封装数据返回失败提示函数

function errorState (response) {

  // 隐藏loading

  // 如果http状态码正常，则直接返回数据

  if (response && (response.status === 200 || response.status === 304 || response.status === 400)) {

    // 如果不需要除了data之外的数据，可以直接 return response.data

    return response

  } else {

    alert('数据获取错误')

  }

}

// 封装数据返回成功提示函数---------------------------------------------------------------------------

function successState (res) {

  // 隐藏loading

  // 统一判断后端返回的错误码(错误码与后台协商而定)

//   if (res.data.code === '000000') {

    // alert('success')

    // return res

//   }

}

// 封装axios--------------------------------------------------------------------------------------

function $axios (method:unknown, url:unknown, params:unknown) {

  let httpDefault = {

    method: method,

    baseURL: baseURL,

    url: url,

    headers:{

        'Content-Type':'application/json',

        "Authorization":localStorage.getItem("token")

    },

    // `params` 是即将与请求一起发送的 URL 参数

    // `data` 是作为请求主体被发送的数据

    params: method === 'GET' || method === 'DELETE' ? params : null,

    data: method === 'POST' || method === 'PUT' ? params : null,

    timeout: 10000

  }

  // 注意**Promise**使用(Promise首字母大写)

  return new Promise((resolve, reject) => {

    axios(httpDefault)

      // 此处的.then属于axios

      .then((res) => {

        successState(res)

        resolve(res)

      }).catch((response) => {

        // errorState(response)

        reject(response)

      })

  })

}

// 输出函数getAxios、postAxios、putAxios、delectAxios，供其他文件调用----------------------

const getAxios=(url, params) => $axios('GET', url, params)

const postAxios=(url, params) => $axios('POST', url, params)

const putAxios=(url, params) => $axios('PUT', url, params)

const delectAxios=(url, params) => $axios('DELETE', url, params)

// 导出让外部使用

export default {

    getAxios,

    postAxios,

    putAxios ,

    delectAxios,

}

 

3.创建所有的接口文件api.ts

在src同级目录下创建api文件夹，创建api.ts,代码如下：

const API={

    // 后续其他的相关接口

    data:{

        // 获取所有正常的资源类型

        typeAll:"/api/v1/data/common/res/type/all",

    },

}

export default {

    API

}

4.main.ts文件引入使用

vue3不如vue2在原型上增加属性简单，推荐使用vue提供的provide / Inject去提供全局变量

import { createApp,provide } from 'vue'

import App from './App.vue'

import api from '@/api/api'

import axios from '@/utils/axios'

const app =createApp(App)

// 通过vue提供的provide / Inject去提供全局变量

app.provide('$api',api)

app.provide('$axios',axios)

app.mount('#app')

5.在需要发请求的页面引入使用就可以了

可以先打印出来看

import {inject } from 'vue'

const $axios=inject('$axios')

const $api=inject('$api')

console.log($axios);

console.log($api);

看见控制台打印出来 就可以放心使用了 

使用：比如点击按钮获取一些数据（在这之前肯定是要配置跨域问题的，下面代码可以直接简单配置跨域问题） 

在vite.config.ts

export default defineConfig({

  plugins: [vue()],

  resolve: {

    alias: {

      "@": path.resolve("./src") // 相对路径别名配置，使用 @ 代替 src

    }

  },

  server: {

    host: "127.0.0.1",

    // port:4000,//设置服务启动端口号，是一个可选项，不要设置为本机的端口号，可能会发生冲突

    open:true,//是否自动打开浏览器，可选项

    cors:true,//允许跨域。

    // 设置代理

    proxy: {

      // 将请求代理到另一个服务器

      '/api': {

        target: 'https://xxxxx.com/',//这是你要跨域请求的地址前缀

        changeOrigin: true,//开启跨域

        rewrite: path => path.replace(/^\/api/, ''),//去除前缀api

      }

    }

  }

})

需要发请求页面使用 

import {inject,reactive,ref } from 'vue'

const $axios :any=inject('$axios')

const $api:any=inject('$api')

let data = reactive()

const reqData=()=>{

  console.log("点击了按钮");

   $axios.postAxios($api.API.data.typeAll,{}).then((resp:any)=>{

    console.log(resp);

  })