vue3中封装axios

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:'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);
});
 
export default instance

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

import req from './ceshi.js';                 //连接接口文件
export function list({ pageNo, pageSize }) {
    return req({
        url: '/user/organizations',
        method: 'get',
        params:{
            pageNo,
            pageSize
        },
        headers: {
            authorization: sessionStorage.getItem("token"),
            //设置请求报文头，没有可以不写
        },
    })
}

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

import {list} from '../api/nav'     //引入进来

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

	list({pageNo:1,pageSize:20})     //函数名以及传参
    .then(res=>{
      console.log(res)    //成功后返回的数据
    })

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