vue3中封裝axios

安裝axios npm install axios --save
在src文件下建立api文件夾
在api文件中創建模板 ceshi.js
在模板文件中輸入內容

import axios from 'axios'
//建立axios的一個實例 
var instance = axios.create({
    baseURL:'http://localhost:8080/',//接口統一域名
    timeout: 6000                                                       //設置超時
})
 
 
//------------------- 1、請求攔截器 忽略
instance.interceptors.request.use(function (config) {
 
    return config;
}, function (error) {
    // 對請求錯誤作些什麼
    
    return Promise.reject(error);
});
 
//----------------- 2、響應攔截器 忽略
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
    }
}

在api文件下建立接口文件 nav.js
在接口文件中輸入內容

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是參數
 }

在vue文件中調用已經寫好的函數

import {GETTREEDATA,three} from '../api/nav'     //引入進來
       //函數名1 函數名2 接口文件

在事件或生命週期中調用

GETTREEDATA(123)     //函數名以及傳參
    .then(res=>{
      console.log(res)    //成功後返回的數據
    })
    three(123)     //函數名以及傳參
    .then(res=>{
      console.log(res)    //成功後返回的數據
    })

vue3中封裝axios

vue3中封裝axios

以上就是封裝axios接口的步驟，但願對你有所幫助