vue3.0使用promise封装axios请求

参考链接https://www.jianshu.com/p/ae793364e171

下载axios

npm install axios --save

文件存放

1. 在src文件夹内新建 utils文件夹
2. 在utils文件夹中建立一个request.js文件（存放axios相关
3. 在utils文件夹内建立一个api文件夹，其中建立js文件（如果有需求可以建立多个按页面或者其他模块化），用来存放具体的请求

封装axios

import axios from 'axios';

// 设置axios
const service = axios.create({
    baseURL: "/api"    //基础路径设置在vite.config.js中，解决跨域问题
})
// 封装post请求
let post = function (url, data_ = {}) {
    return new Promise((resolve, reject) => {
        service.post(url, data_).then((res) => {
            // 成功
            return resolve(res)
        }).catch((err) => {
            // 失败
            return reject(err)
        })
    })
}
let get = function(url,data_ ={}){
    return new Promise((resolve, reject) => {
        let params = data_;
        service.get(url, {
            params
        }).then((res) => {
            // 成功
            return resolve(res)
        }).catch((err) => {
            // 失败
            return reject(err)
        })
    })
}

// 添加请求拦截
service.interceptors.request.use(config => {
    // 添加请求头
    config.headers = {
        "authorization": localStorage.token 
    }
    return config;
})
// 添加响应拦截
service.interceptors.response.use(res => {
    return res.data
}, err => {
    return err
})

// 导出
export default {
    post,
    get,
}

具体请求实现

import axios from '../request.js';

//获取首页数据
export function getIndexData(){
	return axios.get('Index',{action:"getHomeData"})
}

// 获取系列数据
export function getCategoryList(data){
	return axios.get('ProductList',data)
}

注：axios.get(‘路径名’，携带参数)
注：携带参数类型为对象，即**{属性1，属性2……属性n}**

使用

// 获取首页数据
			getIndexData().then(res => {
				console.log(res);
			})

题外话：vue3.0中页面渲染数据，我将该请求放在beforeMount() 中，即数据获取成功才渲染页面，不知这样有没有什么弊端哈哈哈。

跨域

// 项目使用了vite，则在vite.config.js文件中。
// 如仅使用vue，可百度看看其他人的写法，差距不大。

//vite.config.js
import {
	defineConfig
} from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
   //……
	server: {
		proxy: {
			'/api': { // 需要注意的是这里的 /api 要与utils文件下面的axios.js文件的基础路径保持一致
				target: "", // 后端地址
				changeOrigin: true,
				rewrite: (path) => path.replace(/^\/api/, '')
			}
		}
	},
	//……