vue中的 Ajax请求—axios

最新推荐文章于 2025-03-12 10:03:21 发布

致可乐

最新推荐文章于 2025-03-12 10:03:21 发布

阅读量3.3k

点赞数 1

分类专栏：笔记项目文章标签： ajax vue.js

本文链接：https://blog.youkuaiyun.com/ling_xy/article/details/119837812

版权

笔记同时被 2 个专栏收录

51 篇文章

订阅专栏

项目

6 篇文章

订阅专栏

这篇博客详细介绍了在Vue项目中如何配置和封装axios，包括设置路由、配置axios的请求超时、默认请求头，添加请求和响应拦截器，封装get和post请求，并实现统一的API管理。在响应拦截器中处理了状态码异常，如404错误。最后，提供了封装的完整代码示例。

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

用于前后端分离项目返回的是 Promise
axios请求别名
axios是一个就promise的HTTP库，可以用在浏览器和node.js中

配置路由

1.配置路由文件
在这里插入图片描述
routes.js：

let Index=()=>import('../view/Index.vue')
export default[
    {
        path:'/',
        name:'index',
        component:Index
    }
]

index.js：

import Vue from 'vue'
import vueRouter from 'vue-router'
Vue.use(vueRouter);
import routes from './routes';
let router= new vueRouter({
    mode:'history',
    routes
});
export default router;

2.挂载到main.js

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

3.在App.vue中配置出口

<div id="app">
  <router-view></router-view>
</div>

一、配置axios

我们使用第三方库
在这里插入图片描述

vue 使用axios插件

cnpm install --save-dev axios

（一）请求方法（不使用）

这种方法简单，但是在项目中到处使用会太冗余，
我们在接下来封装成模块使用

main.js:

（1）get请求
1.无参请求

import axios from 'axios'
axios.get('/').then((res)=>{

}).catch((err)=>{
  
})

2.带参请求

import axios from 'axios'
axios.get('/',{
  params:{
    id:1
  }
}).then((res)=>{

}).catch((err)=>{

})

（2）post请求
1.无参请求

import axios from 'axios'
axios.post('/').then((res)=>{

}).catch((err)=>{
  
})

2.带参请求

import axios from 'axios'
axios.get('/',{
    id:1
}).then((res)=>{

}).catch((err)=>{

})

（2）axios封装 !

axios ：专门处理cros跨域
[前后端分离项目 ：需要后端配置好cros跨域，前端直接访问]

在src目录下建立一个请求
用来封装ajax请求以及其他操作
在这里插入图片描述

1.设置axios请求超时

//封装ajax请求 以及其他操作 
/* 
    axios 专门处理cros跨域
*/
import axios from "axios";
//1.设置axios请求超时
/** 
*  @param 设置超时  
* **/
axios.defaults.timeout=5000;

2.默认设置post的请求头

//2.继续默认设置post的请求头
axios.defaults.headers.post["Content-Type"]="application/x-www-form-urlencoded;charset=UTF-8"

3.设置ajax拦截器

1 .request拦截请求时拦截(监测用户是否有token值，登录等)

2.response拦截服务器响应后，拦截一些状态码(比如404后拦截到404界面)

（1）请求拦截器 request

http.js:

//引入全局状态管理store
import store from '../store/index'  //上一篇中

state.js：

/* 数据 */
export default{
    token:''
}

http.js:

//config 请求相关配置(包括请求头等)
axios.interceptors.request.use((config)=>{
    //监测登录状态之类
    const tokrnid=store.state.token;
    /* 
    监测token存在 
    并且给请求头设置参数Authortoken为token 传到后台监测 
    */
    tokrnid&&(config.headers.Authortoken=tokenid);
    return config;  //一定记得返回
},error=>{
    return Promise.error(error);  //拦截失败
});

后台服务器接收，获取到请求头值Authortoken为token ，检测这个值是否有效。如果后台token与其一致则有效，证明用户登陆成功。如果登录失败或失效，则响应失效，需重新登陆。

（2）响应拦截器 response

http.js:

//设置响应拦截器
axios.interceptors.response.use((response)=>{
    //如果服务器响应状态码200
    if(response.status==200){
        return Promise.resolve(response);
    }
    else{
        return Promise.reject(response);
    }
})

如果发生错误（服务器响应失败）：

1.创建缓存src/storage/storage.js:

export default{
    setItem(key,data){
        localStorage.setItem(key,data);
    },
    getItem(key){
        return localStorage.getItem(key);
    },
    removeItem(key){
        localStorage.removeItem(key);
    }
}

2.storage/state.js:

/* 数据 */
export default{
    token:''
}

3.storage/mutations.js

export default{
    removeToken(state,args){
        state.token=args;
    }
}

4.request/http.js

//引入路由
import router from '../router/index'
//引入缓存文件
import storage from '../storage/storage'


//设置响应拦截器
axios.interceptors.response.use((response)=>{
    //如果服务器响应状态码200
    if(response.status==200){
        return Promise.resolve(response);
    }
    else{
        return Promise.reject(response);
    }
},(error)=>{
    //服务器响应失败 404 500
    if(error.response.status){
        switch(error.response.status){
            /* 401 未登录状态 */
            case 401:
                //直接路由跳转到登录界面
                router.replace({
                    path:'/login'
                });
            break;
            /* 403 token失效 */    
            case 403:
                // 清除 全局状态store token(前端) 和 缓存token(后端)
                //再跳转登录界面
                storage.removeItem("token");
                storage.commit("removeToken",null);
                router.replace({
                    path:'/login'
                });
            break;
            /* 404 页面丢失 */
            case 404:
                alert("网络请求不存在！")
            break;
            default:
                console.log(error.response.data.message);
            break;
        }
    }
    return Promise.reject(error.response)
})

4.封装get post请求

(1)get

/** 
*  @param url 请求地址
*  @param params 携带参数   
* 
**/
export function get(url,params){
    return new Promise((resolve,reject)=>{
        axios.get(url,{
            params:params
        }).then(res=>{
            //响应数据
            resolve(res.data);
        }).catch(err=>{
            reject(err.data);
        })
    })
}

(2)post

/** 
*  @param url 请求地址
*  @param params 携带参数   
* 
**/
export function post(url,params){
    return new Promise((resolve,reject)=>{
        axios.post(url,params).then(res=>{
            //响应数据
            resolve(res.data);
        }).catch(err=>{
            reject(err.data);
        })
    })
}

5.封装完成后封装整个api 统一管理

创建src/request/api.js
在这里插入图片描述
main.js：

import api from './request/api'

api.js:

/* 封装整个api 统一管理(对所有ajax请求接口进行统一管理) */

//引入get post 封装方法
import {get,post} from './http'
console.log(get,post);

可以看到是我们封装完毕的方法
在这里插入图片描述

6.实例

main.js：

import api from './request/api'

api.js:

/* 封装整个api 统一管理(对所有ajax请求接口进行统一管理) */

//引入get post 封装方法
import {get,post} from './http'

//定义所有api接口
export const getUserInfo=args=>post('',args);

//getUserInfo执行 直接返回Promise

执行api接口：
我们在首页获取用户信息

Index.vue:

<template>
<div id="index">
    首页
</div>
</template>
<script>
import {getUserInfo} from '../request/api'
export default{
    name:"index",
    created(){
        //获取某个用户的数据
        this.onLoad();
    },
    methods:{
        onLoad(){
            //直接返回Promise
            getUserInfo('').then((res)=>{
                //成功获取的数据
                console.log(res);
            })  
        }
    }
}
</script>

路径也可以再封装一个文件，还接口只需更换对应变量

附：完整版axios封装

src/request/http.js:

//封装ajax请求 以及其他操作 
/* 
    axios 专门处理cros跨域
    [前后端分离项目 需要后端配置好cros跨域，前端直接访问]
*/
import axios from "axios";

//引入全局状态管理store
import store from '../store/index'  //上一篇中
//引入路由
import router from '../router/index'
//引入缓存文件
import storage from '../storage/storage'
//设置axios请求超时
/** 
*  @param 设置超时  
* **/
axios.defaults.timeout=5000; 
//继续默认设置post的请求头
axios.defaults.headers.post["Content-Type"]="application/x-www-form-urlencoded;charset=UTF-8"
//设置ajax拦截器
/* 
    1.request拦截 请求时拦截(监测用户是否有token值，登录等)
    2.response拦截 服务器相应后，拦截一些状态码(比如404后拦截到404界面)
*/
//config 请求相关配置(包括请求头等)
//请求拦截器
axios.interceptors.request.use((config)=>{
    //监测登录状态之类
    const tokrnid=store.state.token;
    /* 
    监测token存在 
    并且给请求头设置参数Authortoken为token 传到后台监测 
    */
    tokrnid&&(config.headers.Authortoken=tokenid);
    return config;
},error=>{
    return Promise.error(error);  //拦截失败
});

//设置响应拦截器
axios.interceptors.response.use((response)=>{
    //如果服务器响应状态码200
    if(response.status==200){
        return Promise.resolve(response);
    }
    else{
        return Promise.reject(response);
    }
},(error)=>{
    //服务器响应失败 404 500
    if(error.response.status){
        switch(error.response.status){
            /* 401 未登录状态 */
            case 401:
                //直接路由跳转到登录界面
                router.replace({
                    path:'/login'
                });
            break;
            /* 403 token失效 */    
            case 403:
                // 清除 全局状态store token(前端) 和 缓存token(后端)
                //再跳转登录界面
                storage.removeItem("token");
                storage.commit("removeItem",null);
                router.replace({
                    path:'/login'
                });
            break;
            /* 404 页面丢失 */
            case 404:
                alert("网络请求不存在！")
            break;
            default:
                console.log(error.response.data.message);
            break;
        }
    }
    return Promise.reject(error.response)
})

//封装get post请求
/** 
*  @param url 请求地址
*  @param params 携带参数   
* 
**/
export function get(url,params){
    return new Promise((resolve,reject)=>{
        axios.get(url,{
            params:params
        }).then(res=>{
            //响应数据
            resolve(res.data);
        }).catch(err=>{
            reject(err.data);
        })
    })
}
/** 
*  @param url 请求地址
*  @param params 携带参数   
* 
**/
export function post(url,params){
    return new Promise((resolve,reject)=>{
        axios.post(url,params).then(res=>{
            //响应数据
            resolve(res.data);
        }).catch(err=>{
            reject(err.data);
        })
    })
}