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                                                       //设置超时
})
 
 
//------------------- 一、请求拦截器 忽略
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
    }
}

在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接口的步骤，希望对你有所帮助

猜你喜欢