vue3中封装axios

1. 安装axios npm install axios --save
2. 在src文件下创建api文件夹
   
3. 在api文件中建立模板 ceshi.js
   
4. 在模板文件中输入内容

import axios from 'axios' //创建axios的一个实例  var instance = axios.create({     baseURL:'https://localhost:8080/',//接口统一域名     timeout: 6000 //设置超时 }) //------------------- 一、请求拦截器 忽略 instance.interceptors.request.use(function (config) { return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); }); //----------------- 二、响应拦截器 忽略 instance.interceptors.response.use(function (response) { return response.data; }, function (error) { // 对响应错误做点什么     console.log('拦截器报错'); return Promise.reject(error); }); /**  * 使用es6的export default导出了一个函数，导出的函数代替axios去帮我们请求数据，  * 函数的参数及返回值如下：  * @param {String} method  请求的方法：get、post、delete、put  * @param {String} url     请求的url:  * @param {Object} data    请求的参数  * @returns {Promise}     返回一个promise对象，其实就相当于axios请求数据的返回值  */ export default function (method, url, data = null) {     method = method.toLowerCase(); if (method == 'post') { return instance.post(url, data) } else if (method == 'get') { return instance.get(url, { params: data }) } else if (method == 'delete') { return instance.delete(url, { params: data }) }else if(method == 'put'){ return instance.put(url,data) }else{         console.error('未知的method'+method) return false } } 

5. 在api文件下创建接口文件 nav.js
   
6. 在接口文件中输入内容

import req from './ceshi.js'; //连接接口文件 export const GETTREEDATA=function(e){ return req('post','/251280/123',{qwe:e}) //post方法以及传参    qwe是字段   e是参数 } export const three=function(e){ return req('get','/251280/12345?qwe='+e) //get方法以及传参      qwe是字段   e是参数 } 

7. 在vue文件中调用已经写好的函数

import {GETTREEDATA,three} from '../api/nav' //引入进来 //函数名1     函数名2         接口文件 

8. 在事件或生命周期中调用

 GETTREEDATA(123) //函数名以及传参 .then(res=>{       console.log(res) //成功后返回的数据 }) three(123) //函数名以及传参 .then(res=>{       console.log(res) //成功后返回的数据 }) 

以上就是封装axios接口的步骤，希望对你有所帮助