首页 > 其他分享 >【Vue】axios二次封装,统一接口管理

【Vue】axios二次封装,统一接口管理

时间:2022-10-09 19:47:43浏览次数:48  
标签:axios 封装 请求 request 接口 js Vue requests

1.安装axios

npm install --save axios

 

 

2.创建封装js

配置请求拦截器,可以在请求发送前进行统一预处理请求,

不用每次在请求的时候手动添加协议头 token 等配置

request.js

request.js

 // axios二次封装

import axios  from "axios";

// axios.create方法创建实例
const requests = axios.create({
    // 配置基础路径
    baseURL:"http://localhost:80/api",
    //请求超时时间
    timeout:5000,
    

});

// 请求拦截器
requests.interceptors.request.use(config => {


    return config;
})


// 响应拦截器
requests.interceptors.response.use(res =>{
    // res = 成功后的返回数据

     return res.data;
},(error)=>{
    // 响应时候后的回调
    return Promise.reject(new Error("faile"))
}

)


export default requests;

 

 

3.创建统一管理Api接口js

index.js

index.js

 // api统一管理

import requests from './request';


//获取用户信息    //发请求
export const getUser = ()=>requests({url:'/getinfo',method:'get',params:{email:"[email protected]"}});

 

如果有很多个接口,可以提前写在该文件,用的时候只需要写名称即可,例如上面的获取用户信息的接口

调用方式;

先引入,然后直接把定义接口的接口名字打出去即可。

import {getUser} from '@/api';

//定义一个方法,并在方法前面使用async  
async function sta() {
// 接口前需要使用 await 
  console.log( await getUser());
}

//调用
sta()

 

 

标签:axios,封装,请求,request,接口,js,Vue,requests
From: https://www.cnblogs.com/Hello233/p/16773385.html

相关文章