Axios及其封装

沐雨~橙风

已于 2022-04-26 20:07:55 修改

阅读量189

点赞数

文章标签： vue

于 2022-04-26 15:41:22 首次发布

本文链接：https://blog.youkuaiyun.com/qq_43761240/article/details/124428907

版权

这篇博客介绍了在Vue项目中如何安装和使用Axios库，包括发起GET和POST请求的基础用法。同时，展示了如何进行Axios的封装，创建一个包含请求拦截器和响应拦截器的实例，并导出用于不同操作的API接口，如获取首页数据和登录。在实际应用中，通过封装后的API调用，可以更方便地管理HTTP请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue项目中axios安装

npm install axios --save

axios的get和post的基本用法

 //发起一个get请求
            axios({

                method:'get',
                url:'http://kumanxuan1.f3322.net:8001/index/index',
                
            })
            .then(function(responce){
                console.log(responce)
            });

//发起一个post请求
            axios({

                method:'post',
                url:'http://kumanxuan1.f3322.net:8001/index/index',
                
            })
            .then(function(responce){
                console.log(responce)
            });

axios封装

在src目录创建request文件夹

request.js

//这份文件就是用来做拦截的
import axios from 'axios';
//创建一个单例
const instance = axios.create({
    baseURL: 'http://kumanxuan1.f3322.net:8001',
    timeout:4000
})

//拦截器-请求拦截
instance.interceptors.request.use(config => {
    //部分接口需要拿到token
    let token = localStorage.getItem('token');
    if (token) {
        config.headers = {
            'aa-token':token
        }
    }
    return config
}, err => {
    return Promise.reject(err)
});

//拦截器-响应拦截
instance.interceptors.response.use(res => {
    return res;
}, err => {
    return Promise.reject(err)
});
//整体导出
export default instance;

api.js

//将request.js整体导入
import request from './request'

//请求首页数据
export const GetHomeAPI = () => request.get('/index/index');

//登录
export const PostLoginAPI = () => request.post('/index/index');


//带参请求
export const dianji = (data) => request.get('onclick', data);

使用

<script>
import {GetHomeAPI} from '@/request/api.js'
import{PostLoginAPI} from '@/request/api.js'
export default{
    name:'HelloWorld',
    methods: {
        getFn(){
            //发起一个get请求
            GetHomeAPI().then(function(res){
                console.log(res)
            })
        },
        postFn(){
            //发起一个post请求
            PostLoginAPI().then(function(res){
                console.log(res)
            })
        },
        dianji(){
            //发起一个带参请求
            dianji({
                params:{
                    ID:this.
                }
            }).then((res)=>{

            })
        }
    }
}
</script>