vue-6：axios请求二次封装，模块化管理

axios库：在vue中我们直接要使用的话，先下载axios 组件中导入，然后在mount(){}钩子中使用即可：axios 发送请求：挂载到mounted生命周期钩子函数中

`概念`：基于Promise的一个http的网络通信的库

`引入axios库`： <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.2/axios.min.js"></script>

`axios发送get请求的语法`
'方式一'：
axios.get('服务器地址?键名=键值&键名=键值...')
	 .then(function(res){
    // res: 成功后后端响应的内容
}).catch(function(err){
    // err: 请求失败后的错误信息
    // 前后端通信没有成功
})	

'方式二'：
axios.get('服务器地址', {
    params: {
        属性名: 值,
        属性名: 值
    }
}).then(function(res){
   // res: 成功后后端响应的内容
}).catch(function(err){
    // err: 请求失败后的错误信息
})	


`axios发送post请求的语法`
axios.post('服务器地址', {
    属性名: 值,
    属性名: 值
}).then(function(res){
    // res就是通信成功后响应的内容
}).catch(function(err){
    // err: 通信失败后额错误信息
})

'注意：axios发送的post请求，默认是以json格式来提交参数'
'如果需要以表单数据格式来提交参数，需要使用qs库'
'使用'：
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.0/qs.min.js"></script>
axios.post('服务器地址', Qs.stringify({
     属性名: 值,
    属性名: 值
})).then(function(res){
    // res就是通信成功后响应的内容
}).catch(function(err){
    // err: 通信失败后额错误信息
})

二次封装：其实已经可以直接导入使用了，但是我们不满足于此，来个请求管理

设置proxy代理

vite.config.js中配置：：：axios  配合  proxy 发送请求：
'解决前端跨域问题：节省了前缀请求url等'

// 设置代理服务器
  server:{
    proxy:{ //代理
      '/api':{ //以 /api 开头的ajax请求，自动转发target所表示的第三方服务器
        target:'http://180.76.99.14', //目标服务器
        changeOrigin:true, //开启跨域
      }
    }
  }

-

axios请求二次封装：实例化axios，设置请求拦截器 service.interceptors.request.use()，设置响应拦截器 service.interceptors.response.use()

// 定义对象属性
// import { def } from '@vue/shared';

// 导入请求
import axios from "axios";
// 导入组件提示
import { ElNotification } from 'element-plus'
import 'element-plus/es/components/notification/style/css'
// 导入仓库
import { useUserInfoStore } from '@/stores/userinfo'
import router from '@/router'
var userinfoStore = useUserInfoStore()


// 1.实例化axios
var service = axios.create({
    timeout: 10 * 1000, //超时时间
    baseURL: '', //基准路径
})
// 2.设置请求拦截器
service.interceptors.request.use(
    (config) => {
        // 设置请求头参数,发所有请求携带请求头，不写就会直接跳首页
        config.headers['token'] = userinfoStore.userinfo.token;
        return config;
    },
    (error) => {
        return Promise.reject(error);
    }
)
// 3.设置响应拦截器
service.interceptors.response.use(
    (res) => {
        if (res.data.code == 10119) {
            // 删除过期token
            userinfoStore.remove_userinfo()
            // 跳转登录页
            router.push('/login')
        }
        return res;
    },
    (error) => {
        // 响应提示
        if (error.response.status == 401) {
            ElNotification({
                message: '登录过期,请重新的登录',
                type: 'error',
            })
            // 删除过期的token
            userinfoStore.remove_userinfo()
            // 跳转到登录页
            router.push('/login')
        } else if (error.response.status == 404) {
            ElNotification.error({ message: '访问路径有误!' })
        } else if (error.response.status == 500) {
            ElNotification.error({ message: '服务器内部错误!'})
        } else if (error.response.status == 503) {
            ElNotification.error({ message: '服务器不可用' })
        }
        return Promise.reject(error)
    }
)

export default service;

统一管理请求：再封装 api 文件夹下 index.js

一个请求封装成一个函数

导出每个函数，导入使用

使用的话，组件中导入后，调用接口方法即可

传统restful风格的：因为是拼接，所以不作为对象，直接传递即可获取

// api文件夹下,index.js
//导入设置过拦截器的axios实例对象
import service from '../utils/request'

//一个接口封装成一个函数

//查看快捷分类
export function index_catelist( payload = {} ){
    return service.get('/api/index/catelist', { params: payload } );
}
//查看轮播图
export function banner_list( payload = {} ){
    return service.get('/api/banner/list', { params: payload } );
}
//登陆
export function user_login( payload = {} ){
    return service.post('/api/user/login', payload );
}

升级模块化：：：

// index.ts 中引入请求模块里所有的请求
import * as banner from './banner'
import * as admin from './admin'
import * as pro from './pro'

// 集体导出，所有模块的接口
export default{
    banner,
    admin,
    pro
}

// 导入axios封装好的service
import service from '@/utils/request'

//查看管理员列表
export function  admin_list(payload = {}){
    return service.get('/admin/admin/list', { params: payload } )
}
// 获取管理员信息
export function admin_detail(payload = {}){
    return service.get('/admin/admin/detail',{
        params:{payload}
    })
}
// 添加管理员
export function admin_add(payload = {}){
    return service.post('/admin/admin/add', payload)
}
// 管理员登录
export function admin_login(payload = {}){
    return service.post('/admin/admin/login', payload)
}
// 修改管理员信息
export function admin_update(payload = {}){
    return service.post('/admin/admin/update', payload)
}
// 删除管理员信息
export function admin_delete(payload = {}){
    return service.post('/admin/admin/delete', payload)
}

使用：

// 命名导入( 按需导入 )
// import { index_catelist, banner_list, user_login } from './api'

// 集体导入到一个对象中：推荐
import * as service from './api'


    //查看快捷分类
    service.index_catelist().then((res)=>{
      console.log(res.data);
    })
    //查看轮播图
    service.banner_list().then((res)=>{
      console.log(res.data);
    })
    //登陆
    service.user_login({ loginname:'13611129070',password:'123456' }).then((res)=>{
      console.log(res.data);
    })

vue-6：axios请求二次封装，模块化管理

统一管理请求：再封装 api 文件夹下 index.js

猜你喜欢