VUE axios的安装和使用及封装

axios请求方式

axios.get(config)
axios.post(config)
axios.request(config)
axios.head(config)
axios.put(config)
axios.patch(config)
axios.delete(config)

npm i axios -S 安装axios

使用axios

<template>
  <button @click="axi()">axios</button>
</template>
<script setup>
import axios from "axios";//引入axios
function axi(){
  axios({
    url:'https://api.baidu.cn/api/index',
    method:'get',
    params:{
      page:1,
    }
  }).then(res=>{
    console.log(res)
  })
}
</script>

路径src/network/axios.js

import axios from "axios"
import router from '../router'
import {Toast} from "vant";
// 创建实例时设置配置的默认值
const service = axios.create({
    timeout: 10000,// 超时时间
    // baseURL: 'http://apis.juhe.cn',//默认请求URl
    headers: 'application/x-www-form-urlencoded;charset=UTF-8',
});
// 请求拦截器，在发送请求之前做些什么
service.interceptors.request.use((config) => {
    // 如果API需要认证， 在这统一设置
    const token = window.localStorage.getItem('token');
    if (token) {
        config.headers.Authorization = 'Bearer ' + token;
    }
    // config.headers['token']=''     //没有登陆界面时，可以不携带token
    return config;
}, error => {
    // 对请求错误做些什么
    return Promise.reject(error);
});
// 响应拦截器
service.interceptors.response.use((response) => {
    // 对响应数据做点什么
    // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据，否则的话抛出错误
    if (response.status === 200) {
        return Promise.resolve(response);
    } else {
        return Promise.reject(response);
    }
}, error => {
    // 对响应错误做点什么
    switch (error.response.status) {
        // 401: 未登录
        // 未登录则跳转登录页面，并携带当前页面的路径
        // 在登录成功后返回当前页面，这一步需要在登录页操作。
        case 401:
            router.replace({
                path: '/login',
                query: {
                    redirect: router.currentRoute.fullPath
                }
            });
            break;
        // 403 token过期
        // 登录过期对用户进行提示
        // 清除本地token和清空vuex中token对象
        // 跳转登录页面
        case 403:
            Toast({
                duration: 2000,
                message: '登录过期,请重新登录'
            });
            // 清除token
            sessionStorage.removeItem('token');
            // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
            setTimeout(() => {
                router.replace({
                    path: '/login',
                    query: {
                        redirect: router.currentRoute.fullPath
                    }
                });
            }, 1000);
            break;
        // 404请求不存在
        case 404:
            Toast({
                duration: 3000,
                message: '网络请求不存在'
            });
            break;
        // 其他错误，直接抛出错误提示
        default:
            Toast({
                duration: 4000,
                message: error.response.data.message
            });
    }
    return Promise.reject(error.response);
});
export default service;

路径src/network/request.js

// 导入封装好的axios实例
import service from './axios';
const isProduction=process.env.NODE_ENV === 'production'//是否生产环境
const httpList = {
    test:{ // 测试环境
        http1:'http://localhost:8080', // ip1
        http2:'ws://197.82.15.15:8082', // ip2
    },
    production: { // 生产环境
        http1:'http://192.168.3.44',// ip1
        http2:'ws://197.82.15.15:8084', // ip2
    }
};
let baseUrl;
if (isProduction) { // 是否生产环境
    baseUrl = httpList['production'];
}else{
    baseUrl = httpList['test'];
}
const request = {
    /**
     * methods: 请求
     * @param url 请求地址
     * @param params 请求参数
     */
    get(url,params,httpType='http1'){
        const config = {
            method: 'get',
            url:baseUrl[httpType]+url
        };
        if(params) config.params = params;
        return service(config)
    },
    post(url,params,httpType='http1'){
        const config = {
            method: 'post',
            url:baseUrl[httpType]+url
        };
        if(params) config.data = params;
        return service(config)
    },
    put(url,params,httpType='http1'){
        const config = {
            method: 'put',
            url:baseUrl[httpType]+url
        };
        if(params) config.params = params;
        return service(config)
    },
    delete(url,params,httpType='http1'){
        const config = {
            method: 'delete',
            url:baseUrl[httpType]+url
        };
        if(params) config.params = params;
        return service(config)
    },
    video:`${baseUrl.http1}/video`,//视频地址
    image:`${baseUrl.http1}/image`//图片地址
};
export default request;

挂载到全局

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import request from './network/request'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(store).use(router).use(ElementPlus).mount('#app')
app.config.globalProperties.$request = request;//挂载搞组合式全局
window.request=request//挂载到window

使用

<script setup>
import {getCurrentInstance} from 'vue'
const {proxy} = getCurrentInstance()
function axi(){
  proxy.$request.get('/api/simpleWeather/query'{page:1})
}
</script>